用队列模拟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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
优化javascript的执行速度
Jan 23 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
JS实现的简单表单验证功能完整实例
Oct 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
PHP $_FILES函数详解
2011/03/09 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
妇联主席先进事迹
2014/05/18 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
2014年技术员工作总结
2014/11/18 职场文书
财务统计员岗位职责
2015/04/14 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书