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>新闻热点
疑难解答
