效果：
思路：
首先，多功能框架实现的功能是:css中所有的属性都可以添加进去（也可以把方法作为参数传递过去！），然后进行缓冲运动，比如：物体的高度、长度、颜色、字体大小、透明度等，都可以直接传入参数然后进行运动，简单的说是利用json字符串把数据拼接起来，然后进行传参，参数传入进去到函数以后，根据参数的对象，还有属性，还有函数方法，然后再利用setInterval进行缓冲运动，最后判断运动什么时候结束。有一点要注意的是先用getStyle方法获取非行间样式！！！
代码：
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
div
{
width: 100px;
height: 100px;
background: #00FF00;
left: ;
position: absolute;
font-size: ;
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function () {
var divOn = document.getElementById('div1');
divOn.timer = null;
divOn.onmouseover = function () {
move(divOn, { width: , height: , fontSize: , opacity: });
};
divOn.onmouseout = function () {
move(divOn, { opacity: , height: , fontSize: , width: });
};
}
//-----以下为多功能缓冲框架部分---------------------------------------------------------------------------------------------------------
//获取非行间样式
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//缓冲运动json的应用
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //obj是对象，Json是对象的属性， fnName是函数
clearInterval(obj.timer); //关闭之前的计时器
obj.timer = setInterval(function () {
var timeStop = true; //记录属性是否都已经执行完成
for (var attr in json) { //遍历json中的数据
var oGetStyle = ;
if (attr == 'opacity') { //判断透明度
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * ); //透明度取整，然后转换完后赋值
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / ; //求速度
speed = speed > ? Math.ceil(speed) : Math.floor(speed); //进位取整
// if (oGetStyle == json[attr]) { //如果到达，则关闭计时器
// clearInterval(obj.timer);
// if (fnName) { //当关闭计时器后要执行的函数
// fnName();
// }
// }
// else {
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') { //透明度
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值
obj.style.opacity = (oGetStyle + speed) / ;
}
else {
obj.style[attr] = oGetStyle + speed + 'px'; //移动div
}
// }
}
if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器
clearInterval(obj.timer);
if (fnName) { //当关闭计时器后要执行的函数
fnName();
}
}
}, )
}
//-----------------------------------------------------------------------------------------------------------------------
</script>
</head>
<body>
<div id="div1">
青苹果
</div>
</body>