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>