第一个实例---向右移动的div
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style> 7 #div1{width:100px;height:100px;background:#669999;position:absolute;left:0;} 8 </style> 9 <script> 10 var timer=null; //赋值给一个变量，主要是用来传给clearInterval() 11 clearInterval(timer);//这个定时器是为了消除多次点击按钮时出现的速度叠加现象。 12 function startMove(){ 13 var oDiv=document.getElementById('div1');//获取div 14 timer=setInterval(function(){ 15 var ispeed=7; //定义一个速度变量 16 if(oDiv.offsetLeft>=300) //如果是等于号，就会出现BUG，防止div1不停的往前走。当ispeed为300以上的时候会不停地向右走。 17 { 18 clearInterval(timer); //清除向右移动定时器。 19 } 20 else 21 { 22 oDiv.style.left=oDiv.offsetLeft+ispeed+'px';//div的left值等于元素距离浏览器左边的距离 23 } 24 25 },30) 26 27 } 28 </script> 29 </head> 30 31 <body> 32 <input type="button" value="div移动" onclick="startMove()" /> 33 <div id="div1"></div> 34 </body> 35 </html>
第二个实例---分享到
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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:#339999;position:absolute;left:-100px;;} 8 #div1 span{width:20px;height:60px;line-height:20px;text-align:center;left:100px;top:70px;position:absolute;background:#666666;color:#FFFFFF;border:2px dotted #00CC99;} /*遇到一个很有意思的的东西，只有把span的内容改为中文的时候，行高才起作用。之前用的sharing没有一点反应反而会溢出span*/ 9 </style> 10 <script> 11 window.onload=function(){ 12 var oDiv=document.getElementById('div1'); 13 oDiv.onmouseover=function(){ //因为span包含在div里面，所以写div的鼠标经过事件是可以实现效果的。 14 startMove(10,0); 15 } 16 oDiv.onmouseout=function(){ 17 startOut(-10,-100); 18 } 19 }; 20 var timer=null; 21 function startMove(iSpeed,iTarget) //传参 22 { 23 var oDiv=document.getElementById('div1'); 24 clearInterval(timer); 25 timer=setInterval(function(){ 26 if(oDiv.offsetLeft==iTarget){//可以通过计算目标值和起始点的距离来增加或者减少距离 27 clearInterval(timer); 28 } 29 else{ 30 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 31 } 32 33 },30) 34 35 36 function startOut(iSpeed,iTarget)//鼠标移开事件 37 { 38 var oDiv=document.getElementById('div1'); 39 clearInterval(timer); 40 timer=setInterval(function(){ 41 if(oDiv.offsetLeft==iTarget){ 42 clearInterval(timer); 43 } 44 else{ 45 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 46 } 47 48 },30) 49 }; 50 } 51 </script> 52 </head> 53 54 <body> 55 <div id="div1"> 56 <span>分享到</span> 57 </div> 58 </body> 59 </html>
