效果：
思路：
首先，多功能框架实现的功能是:css中所有的属性都可以添加进去（也可以把方法作为参数传递过去！），然后进行缓冲运动，比如：物体的高度、长度、颜色、字体大小、透明度等，都可以直接传入参数然后进行运动，简单的说是利用json字符串把数据拼接起来，然后进行传参，参数传入进去到函数以后，根据参数的对象，还有属性，还有函数方法，然后再利用setInterval进行缓冲运动，最后判断运动什么时候结束。有一点要注意的是先用getStyle方法获取非行间样式！！！
代码：
1 <head id="Head1" runat="server">
2 <title></title>
3 <style type="text/css">
4 div
5 {
6 width: 100px;
7 height: 100px;
8 background: #00FF00;
9 left: 0;
10 position: absolute;
11 font-size: 20;
12 opacity: 0.3;
13 }
14 </style>
15 <script type="text/javascript">
16 window.onload = function () {
17 var divOn = document.getElementById('div1');
18 divOn.timer = null;
19 divOn.onmouseover = function () {
20 move(divOn, { width: 400, height: 350, fontSize: 50, opacity: 100 });
21 };
22 divOn.onmouseout = function () {
23 move(divOn, { opacity: 30, height: 100, fontSize: 20, width: 100 });
24 };
25 }
26 //-----以下为多功能缓冲框架部分---------------------------------------------------------------------------------------------------------
27 //获取非行间样式
28 function getStyle(ojb, name) {
29 if (ojb.currentStyle) {
30 return ojb.currentStyle[name];
31 }
32 else {
33 return getComputedStyle(ojb, false)[name];
34 }
35 }
36 //缓冲运动json的应用
37 //json{attr,finsh}
38 //json{width:200,height:200}
39 function move(obj, json, fnName) { //obj是对象，Json是对象的属性， fnName是函数
40 clearInterval(obj.timer); //关闭之前的计时器
41 obj.timer = setInterval(function () {
42 var timeStop = true; //记录属性是否都已经执行完成
43 for (var attr in json) { //遍历json中的数据
44 var oGetStyle = 0;
45 if (attr == 'opacity') { //判断透明度
46 oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整，然后转换完后赋值
47 }
48 else {
49 oGetStyle = parseInt(getStyle(obj, attr));
50 }
51 var speed = (json[attr] - oGetStyle) / 5; //求速度
52 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整
53 // if (oGetStyle == json[attr]) { //如果到达，则关闭计时器
54 // clearInterval(obj.timer);
55 // if (fnName) { //当关闭计时器后要执行的函数
56 // fnName();
57 // }
58 // }
59 // else {
60 if (oGetStyle != json[attr])
61 timeStop = false;
62 if (attr == 'opacity') { //透明度
63 obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值
64 obj.style.opacity = (oGetStyle + speed) / 100;
65 }
66 else {
67 obj.style[attr] = oGetStyle + speed + 'px'; //移动div
68 }
69 // }
70 }
71 if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器
72 clearInterval(obj.timer);
73 if (fnName) { //当关闭计时器后要执行的函数
74 fnName();
75 }
76 }
77 }, 30)
78 }
79 //-----------------------------------------------------------------------------------------------------------------------
80 </script>
81 </head>
82 <body>
83 <div id="div1">
84 青苹果
85 </div>
86 </body>
来源：https://www.cnblogs.com/xinchun/p/3452126.html