我的新浪博客 我的视频制作室 我的QQ空间

点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)

效果:

思路:

首先,多功能框架实现的功能是: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>

 

posted @ 2013-12-01 08:38  青苹果  阅读(670)  评论(0编辑  收藏  举报