当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 浅谈原生JS实现jQuery的animate()动画示例

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

2019年03月22日  | 移动技术网IT编程  | 我要评论

本文介绍了浅谈原生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!"); 
    }); 
  } 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网