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的动画算法的更多相关文章

  1. jQuery使用(九):队列及实现原理、基于队列模拟实现animate()

    开篇一张图之队列模型 queue()如何使用? queue()原理实现? 基于queue()模拟实现animate() 一.使用queuer方法.理解队列原理 queue() dequeue() cl ...

  2. 第73天:jQuery基本动画总结

    一.DOM对象跟jQuery对象相互转换 jQuery对象转换成DOM对象: 方式一:$(“#btn”)[0] 方式二:$(“#btn”).get(0) DOM对象转换成jQuery对象: $(doc ...

  3. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  4. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  5. JavaScript基于时间的动画算法

    转自:https://segmentfault.com/a/1190000002416071 前言 前段时间无聊或有聊地做了几个移动端的HTML5游戏.放在不同的移动端平台上进行测试后有了诡异的发现, ...

  6. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  7. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  8. JQuery常用动画实现函数

    1.上拉.下拉和切换 slideup().slidedown().slideToggle() JQuery里面的切换太吊了,它自带判断当前显示状态,如果为显示就执行隐藏,如果为隐藏就执行显示. 2.淡 ...

  9. jquery的动画函数animate()讲解一

    jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...

随机推荐

  1. 从源代码构建 Go 开发环境

    从源代码构建 Go 开发环境 Go 1.5 之前的版本 安装C 语言开发环境 在Go 1.5 之前的版本(比如 1.3.1.4),都会部分的依赖 C 语言的工具链,所以如果你有C 语言的开发环境,就可 ...

  2. 深入理解Spark(一):Spark核心概念RDD

    RDD全称叫做弹性分布式数据集(Resilient Distributed Datasets),它是一种分布式的内存抽象,表示一个只读的记录分区的集合,它只能通过其他RDD转换而创建,为此,RDD支持 ...

  3. Cannot run gnome extension in browser

    Error Message: We cannot detect a running copy of GNOME on this system, so some parts of the interfa ...

  4. Insert or Merge && Insertion or Heap Sort

    原题连接:https://pta.patest.cn/pta/test/1342/exam/4/question/27102 题目如下: According to Wikipedia: Inserti ...

  5. iOS 琐碎点------切某个或某几个角的圆角

    不说废话----------> 1.如果是切四个角的圆角,代码示例: self.picImage.layer.cornerRadius = 8; self.picImage.layer.mask ...

  6. HTML学习有感

    自从到大三之后一直在纠结课下去学些什么,刚开始一直在学PS,当时学的还算可以,可以一段时间不用之后就忘记了,这使我很郁闷!之后一直想学JAVA,跟已经工作的同学讨来了相关的视屏资料以及他培训时的笔记: ...

  7. 剑指Offer面试题:19.包含Min函数的栈

    一.题目:包含Min函数的栈 题目:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(1). 这里我们要实现的就是min ...

  8. Some warning were found during validation

    前几天做一个iOS下的App更新,到上传的时候出了问题,一直传了大半个小时,结果还是没传完,再试依然不行,于是只好关机,把电脑带回家弄. 回家后出现了更奇怪的事,经过漫长等待后,竟然出现这个提示: 我 ...

  9. 《CLR.via.C#第三版》第二部分第8,9章节读书笔记(四)

    三种类型的构造方法: 实例构造器(引用类型):实例构造器永远不能被继承(所以方法前没有修饰符):如果类的修饰符为static(sealed和abstract),编译器根本不会在类的定义中生成一个默认构 ...

  10. 单独使用jdbc编程问题总结(一)

    在学习Mybatis之前,我们先来回顾JDBC编程的相关知识.在此基础上深入的学习Mybatis框架.如有错误,敬请指正. (一)首先我们既然要使用jdbc,当然是要操作数据库了.创建一个名为:myb ...