前言 图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码。 实现原理 加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片。具体...
在为 jTool 提供 offset (获取当前节点位置)方法时, 先后使用了两种方式进行实现, 现整理出来以作记录。前后共使用了两种方式实现了该方法, 这里将这两种方法分别列出。 通过递归实现 function offset(element) {var offest = {top: 0,left: 0};var _position;getOffset(element, true);return offest;// 递归获取 offset, 可以考虑使用 getBoundingClientRectfunction getOffset(node, init) {// 非Element 终止递归if (node....
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> </body> </html> <script> //找到全选按钮 var oChkAllBtn=document.getElementById...
在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到原生JS进行异步数据请求。这时候无非有两种请求方式,一种是AJAX,另一个是JSONP。通过原生JS对异步请求进行简单的封装。 AJAXAJAX是一种数据请求方式,不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是XMLHttpRequest对象,主要请求过程如下: 创建XMLHttpRequest对象(new)连接服务器(open)发送请求(send)接收响应数据(onr...
先给出效果图:写的小组件支持图片的渐显、渐隐,并且可以是有序、随机两种方式。我采用的原型是属性写在构造函数内,方法写在原型对象内。方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子:实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-posit...
实例如下: // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器return new XMLHttpRequest();}else if(typeof ActiveXObject != "undefined"){ // IE6浏览器var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp",];for(var i = 0; i < version.length; i++){try{return new ActiveXObject(version[i]);}catch(e){//跳过}}}else{throw...
需求分析 简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单 1.没有下一级菜单,直接排列 2.有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 > 的符号,效果如图:图:1 初步实现 1.实现是否存在 > 注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路。 HTML结构如下:图:2 ?要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? span存在 : span移除...
上图为博客右侧截取的GIF图,下图为代码效果 HTML: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>SlideFont</title> </head> <body><div class="F-SlideFont-Box"><dl class="F-SlideFont-Box-Tag"><dd class="F-SlideFont-Tag">谷歌</dd><dd class="F-SlideFont-Tag">百度</dd><dd class="F-SlideFont-Tag">阿里</dd><dd class="F-SlideFont-Tag">苹果</dd><dd class="F-SlideFont-Tag">三星</dd><dd ...
作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评:首先css代码 a{text-decoration:none;color:#3DBBF5;}*{margin: 0;padding: 0;}.wrapper{width: 400px;height: 300px;margin: 100px auto;}#lunbo{position: relative;overflow: hidden;}#list{position: relative;white-space: nowrap; // 这块用行元素模拟,所以才用该属性,块元素可修改这块}#list span{display: inline-blo...
又是轮播?没错,换个样式玩轮播。HTML: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>wtf</title> </head> <body><div class="container"><div class="box"><img class="front" src="img/A.jpg" alt="PIC"><img class="back" src="img/B.jpg" alt="PIC"><img class="active" src="img/C.jpg" alt="PIC"><div class="btns"><span class="btn"><</span><span class="btn">></span></div></div></div></bod...
本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下 普及知识:放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度 offsetHeight 获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距 offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距 scrollTop 内容滚动的上边距 scrollLe...
本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</title><style type="text/css"> * {margin: 0;padding: 0; }.wrap {width: 600px;margin: 0 auto;position: relative; }p {position: absolute;left: 65%;top: 10%; }h1 {text-align: center;margin-bottom: 20px; }#score {text-align: center;f...
最近用原生JS写一个环形的鼠标滑动效果,代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{width:50px;height:50px;border-radius:50%;position: absolute;border-width:10px;border-style: solid;}</style> </head> <body> </body> <script>var divList=[];//创建一个空的集合,用来存储创建的divfor(i=0;i<50;i++){//循环次数50,创造50个div(环...
效果图:代码如下: <!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>*{margin:0;padding:0;}#container{width:310px;height:310px;margin:30px auto;}#ul1{width:310px;height:310px;list-style:none;}#ul1 li,#ul1 a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;line-height:100px;}#ul1 a:hover{cursor...
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽;一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和消失。为了便于理解我画了一个图,如下:在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识。本案例分为两部分讲解。第一部分html和css,第二部分js。 一...