[js高手之路]面向对象版本匀速运动框架
Posted ghostwu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[js高手之路]面向对象版本匀速运动框架相关的知识，希望对你有一定的参考价值。
这篇文章的效果，需要看过以下3篇文章：
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)
[js高手之路]打造通用的匀速运动框架
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>通用的面向对象匀速运动框架 - by ghostwu</title> 6 <style> 7 div { 8 width: 200px; 9 height: 200px; 10 background: red; 11 margin:20px; 12 } 13 </style> 14 <script> 15 ( function(){ 16 function css( obj, name ){ 17 if ( obj.currentStyle ) { 18 return obj.currentStyle[name]; 19 }else { 20 return getComputedStyle( obj, false )[name]; 21 } 22 } 23 var ghostwu = {}; 24 ghostwu.linear = { 25 A : function( option ){ 26 return new ghostwu.linear.init( option ); 27 } 28 }; 29 ghostwu.linear.init = function( option ){ 30 this.opt = { 31 \'selector\' : \'\', 32 \'css-name\' : {}, 33 \'speed\' : 10, 34 \'cb\' : undefined 35 } 36 for( var key in option ){ 37 this.opt[key] = option[key]; 38 } 39 this.ele = document.querySelector( this.opt[\'selector\'] ); 40 this.bindEvent(); 41 } 42 ghostwu.linear.init.prototype.bindEvent = function() { 43 var _this = this; 44 this.ele.onmouseover = function(){ 45 _this.animate( this ); 46 }; 47 this.ele.onmouseout = function(){ 48 _this.animate( this ); 49 } 50 } 51 ghostwu.linear.init.prototype.animate = function(){ 52 var cur = 0, _this = this; 53 clearInterval(_this[\'ele\'].timer); 54 _this[\'ele\'].timer = setInterval(function () { 55 var bFlag = true; 56 for (var key in _this.opt[\'css-name\']) { 57 if (key == \'opacity\') { 58 cur = css(_this.ele, \'opacity\') * 100; 59 } else { 60 cur = parseInt(css(_this.ele, key)); 61 } 62 var target = _this.opt[\'css-name\'][key]; 63 if (cur != target) { 64 bFlag = false; 65 if (key == \'opacity\') { 66 _this[\'ele\'].style.opacity = ( cur + _this.opt[\'speed\'] ) / 100; 67 _this[\'ele\'].style.filter = "alpha(opacity:" + (cur + _this.opt[\'speed\']) + ")"; 68 } else { 69 _this[\'ele\'].style[key] = cur + _this.opt[\'speed\'] + "px"; 70 } 71 } 72 } 73 74 if (bFlag) { 75 clearInterval(_this[\'ele\'].timer); 76 _this.opt[\'cb\'] && _this.opt[\'cb\'].call( _this[\'ele\'] ); 77 } 78 }, 1000 / 16 ); 79 } 80 window.g = ghostwu; 81 } )(); 82 window.onload = function() { 83 g.linear.A({ 84 \'selector\' : \'#box\', 85 \'css-name\' : { 86 \'width\' : 300, 87 \'height\' : 400 88 } 89 }); 90 g.linear.A({ 91 \'selector\' : \'#box2\', 92 \'css-name\' : { 93 \'width\' : 300, 94 \'height\' : 400 95 } 96 }); 97 } 98 </script> 99 </head> 100 <body> 101 <div id="box"></div> 102 <div id="box2"></div> 103 </body> 104 </html>
鼠标移动到div查看效果:
以上是关于[js高手之路]面向对象版本匀速运动框架的主要内容，如果未能解决你的问题，请参考以下文章
[js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算
[js高手之路] html5 canvas动画教程 - 匀速运动