用队列模拟jquery的动画算法实例_jquery

本文实例讲述了用队列模拟jquery的动画算法。分享给大家供大家参考。具体分析如下:

Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气。发现他写的一段源码,运行一下,还蛮好玩的,于是拿来分析一下,一来吸收下里边的营养,二来加深一下源码学习的功力。话说这源码还真是提高js内功的一大秘决,不信,就和我一起来品味一下吧。

复制代码 代码如下:

//立即执行函数,没有什么好说的。看下面演示
/**
(function($){
    //此处的$会由后面紧跟的立即执行函数的返回值提供
})(function(){
    //这个函数运行的结果就是$啦
    return aQuery
}())   

*/
(function($) {
    window.$ = $;
})(function() {

    //用来匹配ID字符串
    //(?:表示这里不分组) ,参考正则的内容
    //不过我个人认为把*改成+号会更好,因为#后至少要一个字符吧
    var rquickExpr = /^(?:#([\w-]*))$/;
    //一看便是jquery的重度患者
    function aQuery(selector) {
        return new aQuery.fn.init(selector);
    }

    /**
     * 动画
     * @return {[type]} [description]
     */
    var animation = function() {

        var self = {};
        var Queue = []; //动画队列
        var fireing = false //动画锁
        var first = true; //通过add接口触发

        var getStyle = function(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
        }
        //这里边都是具体的动画效果,没有什么难懂的
        var makeAnim = function(element, options, func) {
            var width = options.width
                //包装了具体的执行算法
                //css3
                //setTimeout
            element.style.webkitTransitionDuration = '2000ms';
            element.style.webkitTransform = 'translate3d(' + width + 'px,0,0)';

            //监听动画完结
            element.addEventListener('webkitTransitionEnd', function() {
                func()
            });
        }

        var _fire = function() {
            //加入动画正在触发
            if (!fireing) {
                var onceRun = Queue.shift();
                if (onceRun) {
                    //防止重复触发
                    fireing = true;
                    //next
                    onceRun(function() {
                        fireing = false;
                        //这里很巧妙的产生了连环调用的效果
                        _fire();
                    });
                } else {
                    fireing = true;
                }
            }
        }

        return self = {
            //增加队列
            add: function(element, options) {
                //这里是整个算法的关键
                //相当于往数组中添加一个函数
                //[function(func){},...]
                //也就是_fire中的onceRun方法,func也就是在那时传进去的。
                //在Aaron的编程中很喜欢用这种技巧,比如预编译什么的。
                Queue.push(function(func) {
                    makeAnim(element, options, func);
                });

                //如果有一个队列立刻触发动画
                if (first && Queue.length) {
                    //这个开关很好的起到了控制后面添加的元素进行排队的作用
                    first = false;
                    //这里等价于直接运行_fire();
                    //Aaron喜欢装A,故意添加一个self.fire出来,或许他是深谋远虑
                    self.fire();
                }
            },
            //触发
            fire: function() {
                _fire();
            }
        }
    }();

    aQuery.fn = aQuery.prototype = {
        run: function(options) {
            animation.add(this.element, options);
            return this;
        }
    }

    var init = aQuery.fn.init = function(selector) {
        var match = rquickExpr.exec(selector);
        var element = document.getElementById(match[1])
        this.element = element;
        return this;
    }
    //差点小看了这一行代码
    //jquery的样子学的不错
    //直接aQuery.fn.init = aQuery.fn不是更好?
    //多一个init变量无非是想减少查询罢了,优化的思想无处不在。
    init.prototype = aQuery.fn;
    return aQuery;
}());

//dom
var oDiv = document.getElementById('div1');
 
//调用
oDiv.onclick = function() {

    $('#div1').run({
        'width': '500'
    }).run({
        'width': '300'
    }).run({
        'width': '1000'
    });
};

附上html就可以自己调式了。要记得用chrome浏览哦。

复制代码 代码如下:

<div id="div1" style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;" data-mce-style="width: 100px; height: 50px; background: red; cursor: pointer; color: #fff; text-align: center; line-height: 50px;">点击</div>

希望本文所述对大家的jQuery程序设计有所帮助。

时间: 2024-10-30 08:53:15

用队列模拟jquery的动画算法实例_jquery的相关文章

用队列模拟jquery的动画算法实例

 这篇文章主要介绍了用队列模拟jquery的动画算法,实例分析了用队列模拟jquery的动画算法的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了用队列模拟jquery的动画算法.分享给大家供大家参考.具体分析如下: Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气.发现他写的一段源码,运行一下,还蛮好玩的,于是拿来分析一下,一来吸收下里边的营养,二来加深一下源码学习的功力.话说这源码还真是提高js内功的一大秘决,不信,

jQuery自定义动画函数实例详解(附demo源码)_jquery

本文实例讲述了jQuery自定义动画函数完整实现技巧.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d

javascript动画算法实例分析_javascript技巧

本文实例讲述了javascript动画算法.分享给大家供大家参考.具体如下: 动画算法 Linear:无缓动效果(匀速运动): Quadratic:二次方的缓动: Cubic:三次方的缓动 Quartic:四次方的缓动: Quintic:五次方的缓动: Sinusoidal:正弦曲线的缓动: Exponential:指数曲线的缓动: Circular:圆形曲线的缓动: Elastic:指数衰减的正弦曲线缓动: Back:超过范围的三次方缓动): Bounce:指数衰减的反弹缓动. 每个效果都分三

jQuery后代选择器用法实例_jquery

本文实例讲述了jQuery后代选择器用法.分享给大家供大家参考.具体分析如下: 后代选择器匹配给定的祖先元素下用以匹配的所有后代元素. 点击选择器可以查阅参考手册中所有jQuery选择器. 代码实例如下: 复制代码 代码如下: $(".mydiv span") 以上代码匹配类名mydiv元素包含的span元素.两个选择器之间要用空格分隔. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta

jQuery之动画效果大全_jquery

下面介绍了几种动画效果的方法,具体如下: 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.  show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("

JQuery中的事件及动画用法实例_jquery

本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

jQuery实现带有洗牌效果的动画分页实例_jquery

本文实例讲述了jQuery实现带有洗牌效果的动画分页.分享给大家供大家参考.具体如下: 这款jquery分页示例载入的是一个图片的LI列表,使用jQuery技术将其分为多页显示,在分页的过程中,还加入了动画效果,使整个分页效果看上去很有专业味. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-list-page-flash-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

jQuery使用animate创建动画用法实例_jquery

本文实例讲述了jQuery使用animate创建动画用法.分享给大家供大家参考.具体如下: animate的用法: animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数. 实例运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

jQuery插件扩展测试实例_jquery

本文实例讲述了jQuery插件扩展测试方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-