这篇文章的效果，需要看过以下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查看效果: