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


Posted in Javascript onJanuary 20, 2015

本文实例讲述了用队列模拟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程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
jQuery 处理页面的事件详解
Jan 20 #Javascript
DOM 事件流详解
Jan 20 #Javascript
jQuery链使用指南
Jan 20 #Javascript
使用jQuery管理选择结果
Jan 20 #Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php xfocus防注入资料
2008/04/27 PHP
php smarty函数扩展
2010/03/15 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python字符串处理之count()方法的使用
2015/05/18 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
迟到检讨书1000字
2014/01/15 职场文书
小区停车场管理制度
2014/01/27 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
导游词之南京中山陵
2019/11/27 职场文书