zoukankan html css js c++ java

js运动基础

1. 什么是运动
2. 如何让DIV动起来，运动停止条件

 1 function startMove()
 2 {
 3     var oDiv=document.getElementById('div1');
 4     
 5     timer=setInterval(function (){
 6         var iSpeed=7;
 7         
 8         if(oDiv.offsetLeft>=300)
 9         {
10             //运动一旦达到我的要求，就应该让运动停止，取消定时器 clearInterval
11             clearInterval(timer);
12         }
13         oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
14     }, 30);
15 }

View Code

3. 解决连续点击引发的重复运动问题

 1 var timer=null;//设置一个定时器，便于取消定时器
 2 
 3 function startMove()
 4 {
 5     var oDiv=document.getElementById('div1');
 6     
 7     timer=setInterval(function (){
 8         var iSpeed=10;
 9         
10         if(oDiv.offsetLeft>=300)    //是否到达终点
11         {    
12             //运动一旦达到我的要求，就应该让运动停止，取消定时器 clearInterval
13             clearInterval(timer);    //到达终点
14         }
15         else
16         {    //用else来解决连续重复点击速度加快的问题
17             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';    //到达之前
18         }
19     }, 30);
20 }

4. 消除重复点击速度加快的问题

因为每次点击一次按钮就开一个定时器，导致定时器同时开了好多个，因此我们只需要保证永远只有一个定时器，在前面加一个clearInterval取消前面的定时器，保证整个过程中只开启一个定时器。

 1 var timer=null;
 2 
 3 function startMove()
 4 {
 5     var oDiv=document.getElementById('div1');
 6     //防止在点击多次之后同时开启多个定时器，在一开始就关掉原来所有的定时器，保证点击时只会开一个定时器。
 7     clearInterval(timer);
 8     timer=setInterval(function (){
 9         var iSpeed=5;
10         
11         if(oDiv.offsetLeft>=300)    //是否到达终点
12         {
13             clearInterval(timer);    //到达终点
14         }
15         else
16         {
17             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';    //到达之前
18         }
19     }, 30);
20 }

5. 运动框架介绍

1.在开始运动时，关闭已有定时器

　2.把运动和停止隔开（if/else）

一套框架完成多件事

6. “分享到”侧边栏实例——便用运动框架

　　思考问题的实质，侧边缘广告的实质是鼠标的移入移出，我们在这里加上定时器，让他显示的比较好看

 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 <style>
 5 #div1 {100px; height:200px; background:#CCC; position:absolute; left:-100px;}
 6 #div1 span {20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}
 7 
 8 </style>
 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <title>无标题文档</title>
11 <script type="text/javascript">
12 window.onload=function ()
13 {
14     var oDiv=document.getElementById('div1');
15 
16     //给div加入一个鼠标移入的事件
17     oDiv.onmouseover=function ()
18     {
19         startMove();//函数调用
20     }
21     //给div加入一个鼠标移出的事件
22     oDiv.onmouseout=function ()
23     {
24         startMove2();//函数调用
25     }
26 }
27 var timer=null;
28 
29 function startMove()
30 {
31     var oDiv=document.getElementById('div1');
32     
33     clearInterval(timer);
34     timer=setInterval(function (){
35         var iSpeed=10;
36         
37         if(oDiv.offsetLeft==0)
38         {
39             clearInterval(timer);
40         }
41         else
42         {
43             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
44         }
45     }, 30);
46 }
47 
48 function startMove2()
49 {
50     var oDiv=document.getElementById('div1');
51     
52     clearInterval(timer);
53     timer=setInterval(function (){
54         var iSpeed=-10;
55         
56         if(oDiv.offsetLeft==-100)
57         {
58             clearInterval(timer);
59         }
60         else
61         {
62             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
63         }
64     }, 30);
65 }
66 </script>
67 </head>
68 
69 <body>
70 <div id="div1">
71     <span>分享到</span>
72 </div>
73 </body>
74 </html>

View Code

7. 简化函数参数的意义、方式

　　对于有相同的内容的代码，用函数包装起来

 1 window.onload=function ()
 2 {
 3     var oDiv=document.getElementById('div1');
 4     
 5     oDiv.onmouseover=function ()
 6     {
 7         startMove(10, 0);
 8     }
 9     
10     oDiv.onmouseout=function ()
11     {
12         startMove(-10, -100);
13     }
14 }
15 var timer=null;
16 
17 function startMove(iSpeed, iTarget)
18 {
19     var oDiv=document.getElementById('div1');
20     
21     clearInterval(timer);
22     timer=setInterval(function (){
23         
24         if(oDiv.offsetLeft==iTarget)
25         {
26             clearInterval(timer);
27         }
28         else
29         {
30             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
31         }
32     }, 30);
33 }

View Code

 1 window.onload=function ()
 2 {
 3     var oDiv=document.getElementById('div1');
 4     
 5     oDiv.onmouseover=function ()
 6     {
 7         startMove(0);
 8     }
 9     
10     oDiv.onmouseout=function ()
11     {
12         startMove(-100);
13     }
14 }
15 var timer=null;
16 
17 function startMove(iTarget)
18 {
19     var oDiv=document.getElementById('div1');
20     
21     clearInterval(timer);
22     timer=setInterval(function (){
23         var iSpeed=0;
24         
25         if(oDiv.offsetLeft<iTarget)
26         {
27             iSpeed=10;
28         }
29         else
30         {
31             iSpeed=-10;
32         }
33         
34         if(oDiv.offsetLeft==iTarget)
35         {
36             clearInterval(timer);
37         }
38         else
39         {
40             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
41         }
42     }, 30);
43 }

View Code

8. 淡入淡出的图片实例（上）

 1 window.onload=function ()
 2 {
 3     var oImg=document.getElementById('img1');
 4     
 5     oImg.onmouseover=function ()
 6     {
 7         startMove(100);
 8     }
 9     
10     oImg.onmouseout=function ()
11     {
12         startMove(30);
13     }
14 }
15 var timer=null;
16 
17 var alpha=30;
18 
19 function startMove(iTarget)
20 {
21     var oImg=document.getElementById('img1');
22     
23     clearInterval(timer);
24     timer=setInterval(function (){
25         var iSpeed=0;
26         
27         if(alpha<iTarget)
28         {
29             iSpeed=5;
30         }
31         else
32         {
33             iSpeed=-5;
34         }
35         
36         if(alpha==iTarget)
37         {
38             clearInterval(timer);
39         }
40         else
41         {
42             alpha+=iSpeed;
43             
44             oImg.style.filter='alpha(opacity:'+alpha+')';
45             oImg.style.opacity=alpha/100;
46             
47             document.title=alpha;
48         }
49     }, 30);
50 }

View Code

图片淡入淡出的效果用css3写完全没有问题，可以看css3 的动画内容。

运动基础（二）
1. 淡入淡出的图片（下）
2. 缓冲运动：缓冲运动的原理、缓冲运动的取值问题

　　距离与速度成正比缓冲运动中一定要注意取整，否则就不能达到我们所要要求的准确状态
3. Math.ceil、Math.floor 方法

　　思考：为什么要进行向上取整和向下取整

 1 var timer=null;
 2 
 3 function startMove(iTarget)
 4 {
 5     var oDiv=document.getElementById('div1');
 6     
 7     clearInterval(timer);
 8     timer=setInterval(function (){
 9         var iSpeed=(iTarget-oDiv.offsetLeft)/8;
10         //速度为正的时候，向上取整
11         //速度为负的时候，向下取整
12         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
13         /*if(iSpeed>0)
14         {
15             iSpeed=Math.ceil(iSpeed);
16         }
17         else
18         {
19             iSpeed=Math.floor(iSpeed);
20         }*/
21         
22         if(oDiv.offsetLeft==iTarget)    //是否到达终点
23         {
24             clearInterval(timer);    //到达终点
25         }
26         else
27         {
28             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';    //到达之前
29         }
30         
31         document.title=oDiv.offsetLeft+',speed='+iSpeed;
32     }, 30);
33 }

View Code

4. 带缓冲运动的侧边栏实例

 1 window.onscroll=function ()
 2 {
 3     var oDiv=document.getElementById('div1');
 4     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 5     
 6     //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
 7     var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
 8     
 9     startMove(parseInt(t));//parseInt(t)取整，防止div抖动
10 }
11 
12 var timer=null;
13 
14 function startMove(iTarget)
15 {
16     var oDiv=document.getElementById('div1');
17     
18     clearInterval(timer);
19     timer=setInterval(function (){
20         var iSpeed=(iTarget-oDiv.offsetTop)/8;
21         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
22         
23         if(oDiv.offsetTop==iTarget)
24         {
25             clearInterval(timer);
26         }
27         else
28         {
29             oDiv.style.top=oDiv.offsetTop+iSpeed+'px';
30         }
31         
32         txt1.value=oDiv.offsetTop+',目标：'+iTarget;
33     }, 30);
34 }

View Code

5. 解决缓冲运动目标值不是整数的情况

　　利用parseInt() 进行取整
6. 匀速运动的停止条件、缓冲运动停止条件

　　匀速运动：距离足够近

　　缓冲运动：两点重合

查看全文

相关阅读:
浮于文字上方的图片如何设置居中
 grub4dos_BIOS和grub4dos_UEFI编译环境搭建(ubuntu14.04)
微信小程序开发——开发小技巧集锦
 vue+Better-scroll实现滚动位置保持并对页面切换效果进行优化
 谈谈fork/join实现原理
 ES系列(七)：多节点任务的高效分发与收集实现
 JVM系列(五)：gc实现概要01
谈谈stream的运行原理
 ES系列(六)：search处理过程实现1框架
 ES系列(五)：获取单条数据get处理过程实现

原文地址：https://www.cnblogs.com/xs-yqz/p/4484797.html