运动第一课时

第一个实例---向右移动的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>