JS——運動事件

時間 2019-12-06

原文原文鏈接

運動基礎html

簡單案例演示（讓div運動）：框架

 1 <script>
 2 　　var timer=null;
 3         
 4 　　function startMove(){
 5 　　　　var oDiv=document.getElementById('div');
 6 
 7 　　　　clearInterval(timer);       
 8 　　　　//每次startMove()事件觸發，關閉以前的定時器（避免屢次觸發，調用屢次定時器）
 9 
10 　　　　timer=setInterval(function(){       //開啓定時器，讓div運動起來
11 　　　　　　if(oDiv.offsetLeft>=400){
12 　　　　　　　　clearInterval(timer);       //讓div在固定位置中止運動
13 　　　　　　}
14 　　　　　　else{
15 　　　　　　　　oDiv.style.left=oDiv.offsetLeft+10+'px';
16 　　　　　　　　//讓div以10px距離的速度進行運動，即改變div左邊距到窗口的長度
17 　　　　　　}
18 　　　　},30);
19　　 }
20 </script>

運動框架：函數

每一個運動的事物都必須遵照運動框架這個規則！！！ui

1>在開始運動時，關閉已有的定時器spa

2>把運動和中止隔開（if/else）code

以上的簡單代碼中，第7行代碼中，遵循了運動框架第1條；第11-15行代碼中，遵循了運動框架第二條htm

運動框架實例blog

案例一：「分享到」側邊欄的案例seo

實現效果以下：事件

代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         body{
10             margin: 0;
11             padding: 0;
12         }
13         #div{
14             width: 100px;
15             height: 200px;
16             background: #cccccc;
17             position: absolute;
18             left: -100px;
19         }
20         #div span{
21             width: 20px;
22             height: 60px;
23             line-height: 20px;
24             text-align: center;
25             background: yellow;
26             position:absolute;
27             left: 100px;
28             top: 50px;
29         }
30     </style>
31     <script>
32         window.onload=function(){
33             var oDiv=document.getElementById('div');
34             oDiv.onmousemove=function(){
35                 startMove();
36             }
37             oDiv.onmouseout=function(){
38                 stopMove();
39             }
40         }
41         
42         var timer=null;
43         function startMove(){
44             var oDiv=document.getElementById('div');
45             clearInterval(timer);
46             timer=setInterval(function(){
47                 if(oDiv.offsetLeft==0){
48                     clearInterval(timer);
49                 }
50                 else{
51                     oDiv.style.left=oDiv.offsetLeft+10+'px';
52                 }
53             },30)
54         }
55         function stopMove(){
56             var oDiv=document.getElementById('div');
57             clearInterval(timer);
58             timer=setInterval(function(){
59                 if(oDiv.offsetLeft==-100){
60                     clearInterval(timer);
61                 }
62                 else{
63                     oDiv.style.left=oDiv.offsetLeft-10+'px';
64                 }
65             },30)
66         }
67     </script>
68 </head>
69 <body>
70     <div id="div">
71         <span id="span">分享到</span>
72     </div>
73 </body>
74 </html>

以上js代碼有不少重複的地方，下面讓它簡化一下：（整合成一個方法便可）

 1 <script>
 2 　　window.onload=function(){
 3 　　　　var oDiv=document.getElementById('div');
 4 　　　　oDiv.onmousemove=function(){
 5 　　　　　　Move(0);                //當iTarget：目標位置爲0時
 6 　　　　}
 7 　　　　oDiv.onmouseout=function(){
 8 　　　　　　Move(-100);             //當iTarget：目標位置爲-100時
 9 　　　　}
10 　　}
11         
12 　　var timer=null;
13 　　function Move(iTarget){         //傳參數，iTarget表示目標位置
14 　　　　var oDiv=document.getElementById('div');
15 　　　　clearInterval(timer);
16 　　　　timer=setInterval(function(){
17 　　　　　　var iSpeed=0;
18 　　　　　　if(oDiv.offsetLeft<iTarget){    //作判斷　　【經過目標點left的距離計算速度的值】
19 　　　　　　　　iSpeed=10;      //若當前div左邊距到界面上的長度<目標位置，則速度爲正
20 　　　　　　}
21 　　　　　　else{
22 　　　　　　　　iSpeed=-10;     //反之，則速度爲負
23 　　　　　　}
24 
25 　　　　　　if(oDiv.offsetLeft==iTarget){
26 　　　　　　　　clearInterval(timer);
27 　　　　　　}
28 　　　　　　else{
29 　　　　　　　　oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
30 　　　　　　}
31 　　　　},30)
32　　 }
33 </script>

案例二：「淡入淡出的圖片」案例

實現效果以下：

代碼以下：（簡化寫法【即傳入一個參數、調用一個函數便可】）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>
 8 <style>
 9     #img{
10         width: 50%;
11         opacity: 0.3;
12     }
13 </style>
14 <script>
15 　　window.onload=function(){
16 　　　　var oImg=document.getElementById('img');
17 　　　　oImg.onmouseover=function(){
18 　　　　　　change(100);    //當鼠標移入圖片，設置它的「透明度」最後值爲100
19 　　　　}
20 　　　　oImg.onmouseout=function(){
21 　　　　　　change(30);     //當鼠標移出圖片，設置它的「透明度」最後值爲30
22 　　　　}
23 　　}
24         
25 　　var timer=null;
26 　　var opacity=30;     
27 　　//額外設置變量表示「透明度」的值，後面經過修改這個值來讓圖片改變「透明度」
28 　　//由於獲取不到圖片的透明值，因此只能用變量來代替（不像offsetWidth同樣能夠獲取寬度）
29 
30 　　function change(iTarget){       //傳入一個參數，用於表示「透明度」的最後值
31 　　　　var oImg=document.getElementById('img');
32             
33 　　　　clearInterval(timer);　　　//相當重要的一步！！！！要記得清除原有的計時器
34 　　　　timer=setInterval(function(){
35 　　　　　　var iSpeed=0;
36 　　　　　　if(opacity<iTarget){    //作判斷　　【經過目標「透明度」計算速度的值】
37 　　　　　　　　iSpeed=6;           //若當前圖片「透明度」<目標「透明度」，則速度爲正
38 　　　　　　}
39 　　　　　　else{
40 　　　　　　　　iSpeed=-6;          //反之，則速度爲負
41 　　　　　　}
42 
43 　　　　　　if(opacity==iTarget){
44 　　　　　　　　clearInterval(timer);
45 　　　　　　}
46 　　　　　　else{
47 　　　　　　　　opacity+=iSpeed;
48 　　　　　　　　if(opacity>=100){   
49 　　//當改變速度iSpeed的值時，若最後加在一塊兒的「透明度」數值大於等於100時，直接設置「透明度」爲100便可
50 　　　　　　　　　　opacity=100;
51 　　　　　　　　}
52                else if(opacity<=30){
53                   opacity=30;
54                }
55 　　　　　　　　oImg.style.opacity=opacity/100;             
56     //由於opacity的值爲0-1之間的值，因此取值要除以100
57 　　　　　　}
58 　　　　},30)
59 　　}
60 </script>
61 </head>
62 <body>
63     <img id="img" src="PPT.jpg" alt="PPT">
64 </body>
65 </html>