浅谈原生JS实现jQuery的animate()动画示例


Posted in Javascript onMarch 08, 2017

本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助。

参数介绍:

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操作。

function animate(obj, css, interval, speedFactor, func) { 
  clearInterval(obj.timer); 
  function getCss(obj, prop) { 
    if (obj.currentStyle) 
      return obj.currentStyle[prop]; // ie 
    else  
      return document.defaultView.getComputedStyle(obj, null)[prop]; // 非ie 
  } 
  obj.timer = setInterval(function(){ 
    var flag = true; 
    for (var prop in css) { 
      var cur = 0; 
      if(prop == "opacity")  
        cur = Math.round(parseFloat(getStyle(obj, prop)) * 100); 
      else  
        cur = parseInt(getStyle(obj, prop)); 
      var speed = (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); 
} 
var li = document.getElementsByTagName("li"); 
for(var i = 0; i < li.length; i ++){ 
  li[i].onmouseover = function(){ 
    animate(this, {width: 100, opacity: 0.5}, 10, 0.01, function(){ 
      alert("Finished!"); 
    }); 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
js实现图片实时时钟
Jan 15 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 #Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 #Javascript
JS仿JQuery选择器功能
Mar 08 #Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 #Javascript
footer定位页面底部(代码分享)
Mar 07 #Javascript
vue父子组件的数据传递示例
Mar 07 #Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 #Javascript
You might like
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
php框架知识点的整理和补充
2021/03/01 PHP
javascript重写alert方法的实例代码
2013/03/29 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python字典简介以及用法详解
2016/11/15 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python求解正态分布置信区间教程
2019/11/20 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python随机数函数代码实例解析
2020/02/09 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
《乡愁》教学反思
2014/02/18 职场文书
募捐倡议书
2014/04/14 职场文书
事业单位鉴定材料
2014/05/25 职场文书
2014年司法所工作总结
2014/11/22 职场文书
关于分班的感言
2015/08/04 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python