标签：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>speed&opactly</title> 6 <link rel="stylesheet" href="reset.css"> 7 <style type="text/css"> 8 div{ 9 width: 200px; 10 height: 200px; 11 position: relative; 12 left:-200px; 13 background-color: red; 14 /* filter:alpha(opacity:30); */ 15 opacity:0.3; 16 } 17 div span{ 18 display: block; 19 width: 25px; 20 height: 80px; 21 position: absolute; 22 top:50px; 23 left:200px; 24 background-color: blue; 25 font-size: 20px; 26 padding-top: 20px; 27 } 28 </style> 29 <script type="text/javascript"> 30 window.onload=function(){ 31 var Odiv=document.getElementById("div1"); 32 Odiv.onmouseover=function(){ 33 startMove(0,100); 34 } 35 Odiv.onmouseout=function(){ 36 startMove(-200,30);//合在一起，增加参数 37 /*startMove1();*/ 38 } 39 } 40 var timer1=null; 41 var timer2=null; 42 var alpha=30; 43 function startMove(iTarget1,iTarget2){ 44 clearInterval(timer1); 45 clearInterval(timer2); 46 var speed1,speed2; 47 var Odiv=document.getElementById("div1"); 48 if(Odiv.offsetLeft<iTarget1) 49 speed1=10; 50 else 51 speed1=-10; 52 if(alpha>iTarget2) 53 speed2=-10; 54 else 55 speed2=10; 56 timer1=setInterval(function(){ 57 if(Odiv.offsetLeft==iTarget1）//首先判断等于目标值时就清除定时器，!!注意：等于目标值，卡了好久，这么个小bug(T_T)~ 58 clearInterval(timer1); 59 else 60 { 61 Odiv.style.left=Odiv.offsetLeft+speed1+"px"; 62 63 } 64 },30) 65 timer2=setInterval(function(){ 66 if(alpha==iTarget2) 67 clearInterval(timer2); 68 else 69 { 70 alpha+=speed2; 71 /*Odiv.style.filter=‘alpha(opacity:‘+alpha+‘)‘;*/ //IE 72 Odiv.style.opacity=alpha/100;//火狐，谷歌 73 } 74 },30) 75 } 76 /* 77 function startMove1(){ 78 clearInterval(timer); 79 var Odiv=document.getElementById("div1"); 80 timer=setInterval(function(){ 81 if(Odiv.offsetLeft==-200) 82 clearInterval(timer); 83 else 84 Odiv.style.left=Odiv.offsetLeft-10+"px"; 85 },30) 86 }*/ 87 </script> 88 </head> 89 <body> 90 <div id="div1"> 91 <span id="share">分享</span> 92 </div> 93 </body> 94 </html>
标签：
原文地址：http://www.cnblogs.com/bulubulu/p/5343009.html
