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

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

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

赞 (0)

相关推荐

  • jquery animate 动画效果使用说明

    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就

  • jQuery animate(滑块滑动效果代码)

    jQuery animate(滑块滑动效果代码)

    HTML 复制代码 代码如下: <p><a href="#" class="run">Run</a></p> <div id="box"> </div> <p><a href="#" class="run">Run</a></p><div id="box">

  • JQuery动画animate的stop方法使用详解

    animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css

  • jquery animate图片模向滑动示例代码

    jquery animate图片模向滑动示例代码

    这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认

  • jQuery动画animate方法使用介绍

    复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin

  • jquery中animate的stop()方法作用实例分析

    本文实例分析了jquery中animate的stop()方法作用.分享给大家供大家参考.具体分析如下: 这里以一个视频中的代码段告诉你stop()的作用: 代码如下: <style type="text/css"> ul li{ width:50px; height:30px; background:#333; margin-bottom:10px; color:#fff;} </style> <ul id="flyul"> &l

  • js实现类似jquery里animate动画效果的方法

    本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

  • jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如: 复制代码 代码如下: $("div").animate( {width:"1000px"}) 以上代码能够将div从原有的宽度调整到1000px.也可以一次性

  • jQuery animate效果演示

    animate(params[,duration[,easing[,callback]]])    用于创建自定义动画的函数.<br />     这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").     注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.     而每个属性的值表示这个样式属

  • jquery中animate动画积累的解决方法

    昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放 复制代码 代码如下: <span style="white-space:pre"> </span>/* 无缝式焦点图 */ var _left = 770; var left = -_left;//-770 function slideImg() { if(left == -3080 || left == 0) { _left = -_left; } $('.slidepics').animat

随机推荐