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>
