這篇文章的效果，需要看過以下3篇文章： [js插件開發教程]一步步開發一個可以定製配置的隔行變色小插件 [js高手之路]勻速運動與實例實戰(側邊欄,淡入淡出) [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查看效果:
