最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
浅谈原生JS实现jQuery的animate()动画示例
时间：2017-06-06 编辑：简简单单 来源：一聚教程网
参数介绍：
| obj | 执行动画的元素 |
| css | JSON数值对，形式为“{属性名: 属性值}"，指要执行动画的书序及其对应值 |
| interval | 属性每执行一次改变的时间间隔 |
| speedFactor | 速度因子，使动画具有缓冲效果，而不是匀速不变（speedFactor为1） |
| func | 执行完动画后的回调函数 |
注意：
必须为每一个元素分别添加一个定时器，否则会互相影响。
cur != css[arr]判断是否每一个属性已经达到目标值。只有所有属性都达到目标值，才会清除定时器，flag的作用是防止某个属性第一个达到目标值但还有其他属性没有达到目标值的情况下清除定时器。因此，在每次改变前初始化flag为true，只要遇到一个没有达到目标的属性，就将flag置为false，直至所有属性达到目标值才清除定时器。
属性值opacity的值有小数，所以需要特殊处理： Math.ceil(speed)和Math.floor(speed)以及* 100和 / 100操作。
| 代码如下 | 复制代码 |
functionanimate(obj, css, interval, speedFactor, func) { clearInterval(obj.timer); functiongetCss(obj, prop) { if(obj.currentStyle) returnobj.currentStyle[prop];// ie else returndocument.defaultView.getComputedStyle(obj,null)[prop];// 非ie } obj.timer = setInterval(function(){ varflag =true; for(varpropincss) { varcur = 0; if(prop =="opacity") cur = Math.round(parseFloat(getStyle(obj, prop)) * 100); else cur = parseInt(getStyle(obj, prop)); varspeed = (css[prop] - cur) * speedFactor; speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); if(cur != css[prop]) flag =false; if(prop =="opacity") { obj.style.filter ="alpha(opacity : '+(cur + speed)+' )"; obj.style.opacity = (cur + speed) / 100; } else obj.style[prop] = cur + speed +"px"; } if(flag) { clearInterval(obj.timer); if(func) func(); } }, interval); } varli = document.getElementsByTagName("li"); for(vari = 0; i < li.length; i ++){ li[i].onmouseover =function(){ animate(this, {width: 100, opacity: 0.5}, 10, 0.01,function(){ alert("Finished!"); }); } } | |
-
上一个： jQuery实现选项卡功能（两种方法）
-
下一个： 详谈jQuery中的一些正则匹配表达式
相关文章
- Node.js中使用jQuery的方法示例 08-17
- 解决ECSHOP中transport.js和jquery的冲突的问题 02-18
- jquery属性的相关js实现方法 12-24
- requirejs中使用jquery的例子详解 08-10
- 自己开发js或者jquery插件的方法 12-04
- 解决JQuery中$与JS插件库相冲突问题 11-24