介绍了那么多运动，這次一套代码实现所有运动
1.html代码和css代码，只是定义一个div
1 <style>
2 div{
3 width:200px;
4 height:200px;
5 margin:20px;
6 float:left;
7 background:yellow;
8 border:10px solid black;
9 filter:alpha(opacity:30);
10 opacity:0.3;
11 }
12 </style>
13 <body>
14 <div id="div1">
15
16 </div>
17
18 </body>
2.js代码部分
1 <script>
2 window.onload=function()
3 {
4 var div=document.getElementById(‘div1‘);
5 div.onmouseover=function()
6 {
7 startMove(this,‘height‘,1000);
8 }
9 div.onmouseout=function()
10 {
11 startMove(this,‘height‘,50);
12 }
13 };
14 function getStyle(obj,name) //兼容性问题，修改非行间的css
15 {
16 if (obj.currentStyle)//chrome和firefox
17 {
18 return obj.currentStyle[name];
19 }
20 else//ie浏览器
21 {
22 return getComputedStyle(obj,false)[name];
23 }
24 }
25 function startMove(obj,attr,iTarget)
26 {
27 clearInterval(obj.timer);
28 obj.timer=setInterval(function()
29 {
30 var cur=0;
31 if (attr=="opacity") //判断传入的参数是不是透明度
32 {
33 cur=parseFloat(getStyle(obj,attr))*100; //强制转换为浮点数
34 }
35 else //如果不是透明度，执行這句
36 {
37 cur=parseInt(getStyle(obj, attr)); //返回传入要修改的属性的值
38 }
39 var speed=(iTarget-cur)/100 ; //设置速度
40 speed=speed>0?Math.ceil(speed):Math.floor(speed); //取上下限
41
42 if(cur==iTarget) //当等于要实现的值时停止
43 {
44 clearInterval(obj.timer);
45 }
46 else
47 {
48 if (attr==‘opacity‘) //如果是透明度，兼容性。写两句
49 {
50 obj.style.filter=‘alpha(opcity:‘+(cur+speed)+‘)‘; //chrome和firefox
51 obj.style.opacity=(cur+speed)+‘px‘; //ie
52 }
53 else //要修改的是其他，直接修改他的值
54 {
55 obj.style[attr]=cur+speed+‘px‘;
56 }
57 }
58 },
59 30)
60 }
61 </script>
时间： 2024-08-01 22:47:18