这篇文章的效果,需要看过以下3篇文章:[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>通用的面向对象匀速运动框架 - by ghostwu</title> <style> div { width: 200px; height: 200px; background: red; margin:20px; } </style> <script> ( function(){ function css( obj, name ){ if ( obj.currentStyle ) { return obj.currentStyle[name]; }else { return getComputedStyle( obj, false )[name]; } } var ghostwu = {}; ghostwu.linear = { A : function( option ){ return new ghostwu.linear.init( option ); } }; ghostwu.linear.init = function( option ){ this.opt = { 'selector' : '', 'css-name' : {}, 'speed' : 10, 'cb' : undefined } for( var key in option ){ this.opt[key] = option[key]; } this.ele = document.querySelector( this.opt['selector'] ); this.bindEvent(); } ghostwu.linear.init.prototype.bindEvent = function() { var _this = this; this.ele.onmouseover = function(){ _this.animate( this ); }; this.ele.onmouseout = function(){ _this.animate( this ); } } ghostwu.linear.init.prototype.animate = function(){ var cur = 0, _this = this; clearInterval(_this['ele'].timer); _this['ele'].timer = setInterval(function () { var bFlag = true; for (var key in _this.opt['css-name']) { if (key == 'opacity') { cur = css(_this.ele, 'opacity') * 100; } else { cur = parseInt(css(_this.ele, key)); } var target = _this.opt['css-name'][key]; if (cur != target) { bFlag = false; if (key == 'opacity') { _this['ele'].style.opacity = ( cur + _this.opt['speed'] ) / 100; _this['ele'].style.filter = "alpha(opacity:" + (cur + _this.opt['speed']) + ")"; } else { _this['ele'].style[key] = cur + _this.opt['speed'] + "px"; } } } if (bFlag) { clearInterval(_this['ele'].timer); _this.opt['cb'] && _this.opt['cb'].call( _this['ele'] ); } }, 1000 / 16 ); } window.g = ghostwu; } )(); window.onload = function() { g.linear.A({ 'selector' : '#box', 'css-name' : { 'width' : 300, 'height' : 400 } }); g.linear.A({ 'selector' : '#box2', 'css-name' : { 'width' : 300, 'height' : 400 } }); } </script> </head> <body> <div id="box"></div> <div id="box2"></div> </body> </html>鼠标移动到div查看效果: