这篇文章的效果，需要看过以下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>[js高手之路]面向对象版本匀速运动框架
原文地址：http://www.cnblogs.com/ghostwu/p/7670413.html