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>

1. js滚动事件
2. js 事件驱动原理
3. 移动端 js touch事件
4. JS事件驱动机制
5. js鼠标拖动事件
6. js事件（任意拖动）
7. js事件驱动函数
8. js鼠标移动事件
9. JS事件驱动函数
10. 运动事件的处理
更多相关文章...
• C# 事件（Event） - C#教程
• jQuery Mobile 事件 - jQuery Mobile 教程
• SpringBoot中properties文件不能自动提示解决方法
• IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决