首页 > 代码库 > 简单的JS多物体的运动---运动和透明度的变化

简单的JS多物体的运动---运动和透明度的变化

2024-07-06 08:24:55   222人阅读

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
 8 #div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}
 9 #img1 { opacity: 0.3; miaov: 妙味; filter: alpha(opacity=30); margin-left: 200px;}
10 </style>
11 <script>
12 window.onload = function() {
13     
14     var oDiv1 = document.getElementById(‘div1‘);
15     var oDiv2 = document.getElementById(‘div2‘);
16     var oImg = document.getElementById(‘img1‘);
17     //var iTimer = null;
18     
19     oDiv1.onmouseover = function() {
20         startMove(this, ‘left‘, 0, 10);
21     }
22     
23     oDiv1.onmouseout = function() {
24         startMove(this, ‘left‘, -100, -10);
25     }
26     
27     oImg.onmouseover = function() {
28         startMove(this, ‘opacity‘, 100, 10);
29     }
30     
31     oImg.onmouseout = function() {
32         startMove(this, ‘opacity‘, 30, -10);
33     }
34     
35     function startMove(obj, attr, iTarget, iSpeed) {
36         clearInterval(obj.iTimer);
37         var iCur = 0;
38             
39         obj.iTimer = setInterval(function() {
40             
41             if (attr == ‘opacity‘) {
42                 iCur = Math.round(css( obj, ‘opacity‘ ) * 100);
43             } else {
44                 iCur = parseInt(css(obj, attr));
45             }
46             
47             if (iCur == iTarget) {
48                 clearInterval(obj.iTimer);
49             } else {
50                 if (attr == ‘opacity‘) {
51                     obj.style.opacity = (iCur + iSpeed) / 100;
52                     obj.style.filter = ‘alpha(opacity=‘+ (iCur + iSpeed) +‘)‘;
53                 } else {
54                     obj.style[attr] = iCur + iSpeed + ‘px‘;
55                 }
56             }
57             
58         }, 30);
59     }
60     
61     function css(obj, attr) {
62         if (obj.currentStyle) {
63             return obj.currentStyle[attr];
64         } else {
65             return getComputedStyle(obj, false)[attr];
66         }
67     }
68     
69 }
70 </script>
71 </head>
72 
73 <body>
74     <div id="div1">
75         <div id="div2">分享到</div>
76     </div>
77     
78     <img src="1.jpg" id="img1" />
79 </body>
80 </html>

 


联系
我们