JS_animate 站在别人的肩膀上
2012-12-01 21:13
253 查看
/* * 相关参考地址 ease 函数 和 animate 函数的思想 http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html * 我做的只是简单的封装而已 */ <style type="text/css"> .main{position:relative;width:960px;margin:50px auto 0 auto;height:100px;background:#CCC;} .box_1{position:absolute;width:50px;height:50px;background:#000;top:0;left:0;} .box_2{position:absolute;width:50px;height:50px;background:#F00;top:50px;left:0;} </style> <div class="main"> <div class="box_1" id="box1"></div> <div class="box_2" id="box2"></div> </div> <script type="text/javascript"> /*----外置函数star----*/ var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; }; /*----外置函数end----*/ var animate = Class.create(); animate.prototype = { initialize:function(node,opat){ this.node = node; this.opat = { begin:null, change:null, duration:500, ease:"bounce", field:"left", callback:function(){} }; Object.extend(this.opat,opat||{}); this.action(); }, ease:{ easeOutBack: function(pos){ var s = 1.70158; return (pos=pos-1)*pos*((s+1)*pos + s) + 1; } }, requestAnimationFrame:function(){ return window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); } }, action:function(){ var _this = this, _node = _this.node, _animate = _this.requestAnimationFrame(), _opat = _this.opat, _timeStar = new Date().getTime(), _endPos = _opat.begin + _opat.change, _ease = _this.ease[_opat.ease]; _animate(function(){ var _timeChange = new Date().getTime() - _timeStar, _opat_ = _opat, _node_ = _node, _ease_ = _ease, _timeDuration = _opat_.duration, _changePos = _ease_(_timeChange / _opat_.duration), _nextPos = _opat_.begin + Math.ceil(_changePos*_opat_.change); if(_timeChange >= _timeDuration){ _node_.style[_opat_.field] = _endPos + "px"; _opat_.callback(); return } _node_.style[_opat_.field] = _nextPos + "px"; _animate(arguments.callee); }) } } var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); box1.onclick = function(){ new animate(this,{ begin:box1.offsetLeft, change:500, field:"left", duration:1000, ease:"easeOutBack", callback:function(){ console.log("动画完成!!"); } }); } </script>
相关文章推荐
- 用js实现类似jquery里的animate动画效果
- js实现类似jquery里animate动画效果的方法
- 转别人的js(二)高级运用--d
- js中避免函数名和变量名跟别人冲突(1)
- Android开发进阶,让我们一起站在别人肩膀上学习
- 用js实现类似jquery里的animate动画效果
- Js防止网页被别人iframe嵌套
- 别人如何使用JsUnit的
- js动画(animate)简单引擎
- 基于Angular-animate.js和css实现的轮播图
- JS如何禁止别人查看网站源码
- Raphael.js API之 Animation.delay(),Animation.repeat(),Element.animateWith()
- ypage_ajax.js代码:我也是偷别人的
- android studio混淆打包 总结 站在别人的肩膀上--看的更远
- 大量JavaScript日历控件(some free Calendar control by JS),转载别人的
- ajaxfileupload.js 在别人代码的基础上,自己处理了一些问题,留着备用
- JS禁止别人查看网页的源代码
- VueJS && ReactJS 如何?听听别人怎么说。
- 转别人的js(二)高级运用--e
- [AngularJS] TweenList 3D + AngularJS Animate