浅谈原生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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
AngularJs 常用的过滤器
May 15 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 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
ThinkPHP令牌验证实例
2014/06/18 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python中的五种异常处理机制介绍
2014/09/02 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Form表单及django的form表单的补充
2019/07/25 Python
python中的逆序遍历实例
2019/12/25 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
学校后勤人员职责
2013/12/27 职场文书
寒假思想汇报
2014/01/10 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python