前面的复习：
所以说window.setInterval() 和 window.clearInterval()
和 window.setTimeout() 和 window.clearTimeout() 都是浏览器的对象（BOM），而不是DOM对象。
最后一个就是当鼠标进入的时候停止播放，当鼠标离开的时候继续播放。。。。。。
scroll 系列：
div的滚动事件onscroll（因为滚动条是在div 中的）：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页的标题</title>
6 <style>
7 *{
8 margin:0;
9 padding:0;
10 }
11 div{
12 width: 300px;
13 height: 200px;
14 border:1px solid red;
15 overflow: auto;
16 }
17 input{
18 position: absolute;
19 left: 400px;
20 top: 100px;
21 }
22
23 </style>
24 </head>
25 <body>
26 <div id="dv">我我我我哦我我发就是空地金风科技发简历的空间付款撒地方姐夫撒娇的反馈及发生的借款方方法大师傅就卡了
27 发电房绝绝绝地反击打飞机浮点数据按扣发奖金安防监控大师傅发手机端放发电房绝绝绝地反击打飞机浮点数据按扣发奖金安防监控大师傅发手机端放 发电房绝绝绝地反击打飞机浮点数据按扣发奖金安防监控大师傅发手机端放 发电房绝绝绝地反击打飞机浮点数据按扣发奖金安防监控大师傅发手机端放 发电房绝绝绝地反击打飞机浮点数据按扣发奖金安防监控大师傅发手机端放发电房绝绝绝地反击打飞机浮点数据按扣发奖金安防监控大师傅发手机端放发电房绝绝绝地反击打飞机浮点数据按扣发奖金安防监控大师傅发手机端放
28 </div>
29 <input type="button" value="点我" id="btn">
30 <script src="js/common.js"></script>
31 <script>
32 document.onmousemove = function (evt) {
33 getId$("img").style.left = evt.clientX +"px";
34 getId$("img").style.top = evt.clientY +"px";
35
36 };
37 </script>
38 </body>
39 </html>
View Code
整个网页的滚动事件---封装getScroll（）函数：
向上卷曲出去的距离：
它是兼容代码，有的浏览器认为是浏览器向上出去的距离，有的是支持整体文档向上出去的距离，而有的是认为body出去的距离了！
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页的标题</title>
6 </head>
7 <body>
8 <input type="button" value="点我" id="btn">
9 <script src="js/common.js"></script>
10 <script>
11 function getScroll() {
12 var obj = {};
13 //兼容代码
14 var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
15 //浏览器 // html //body
16 var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
17 obj.top = top;
18 obj.left = left;
19 return obj;
20 }
21 </script>
22 </body>
23 </html>
getScroll() version01
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页的标题</title>
6 </head>
7 <body>
8 <input type="button" value="点我" id="btn">
9 <script src="js/common.js"></script>
10 <script>
11 function getScroll() {
12 var obj = {};
13 //兼容代码
14 obj.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
15 //浏览器 // html //body
16 obj.left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
17 return obj;
18 }
19 </script>
20 </body>
21 </html>
getScroll() version02
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页的标题</title>
6 </head>
7 <body>
8 <input type="button" value="点我" id="btn">
9 <script src="js/common.js"></script>
10 <script>
11 function getScroll() {
12 var obj = {
13 //兼容代码
14 top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
15 //浏览器 // html //body
16 left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
17 };
18 return obj;
19 }
20 </script>
21 </body>
22 </html>
getScroll() version03
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页的标题</title>
6 </head>
7 <body>
8 <input type="button" value="点我" id="btn">
9 <script src="js/common.js"></script>
10 <script>
11 function getScroll() {
12 return {
13 //兼容代码
14 top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
15 //浏览器 // html //body
16 left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
17 };
18 }
19 </script>
20 </body>
21 </html>
getScroll() version04
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页的标题</title>
6 </head>
7 <body>
8 <div>大数据分开就</div>
9 <div>大数据分开就</div>
10 <div>大数据分开就</div>
11 <div>大数据分开就</div>
12 <div>大数据分开就</div>
13 <div>大数据分开就</div>
14 <div>大数据分开就</div>
15 <div>大数据分开就</div>
16 <div>大数据分开就</div>
17 <div>大数据分开就</div>
18 <div>大数据分开就</div>
19 <div>大数据分开就</div>
20 <div>大数据分开就</div>
21 <div>大数据分开就</div>
22 <div>大数据分开就</div>
23 <div>大数据分开就</div>
24 <div>大数据分开就</div>
25 <div>大数据分开就</div>
26 <div>大数据分开就</div>
27 <div>大数据分开就</div>
28 <div>大数据分开就</div>
29 <div>大数据分开就</div>
30 <div>大数据分开就</div>
31 <div>大数据分开就</div>
32 <div>大数据分开就</div>
33 <div>大数据分开就</div>
34 <div>大数据分开就</div>
35 <div>大数据分开就</div>
36 <div>大数据分开就</div>
37 <div>大数据分开就</div>
38 <div>大数据分开就</div>
39 <div>大数据分开就</div>
40 <div>大数据分开就</div>
41 <input type="button" value="点我" id="btn">
42 <script src="js/common.js"></script>
43 <script>
44 function getScroll() {
45 return {
46 //兼容代码
47 top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
48 //浏览器 // html //body
49 left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
50 };
51 }
52 //浏览器的滚动事件
53 window.onscroll = function () {
54 console.log(getScroll().top);
55 };
56 </script>
57 </body>
58 </html>
使用我们自己封装的getScroll() 函数
案例：固定导航栏：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0
10 }
11
12 img {
13 vertical-align: top;
14 }
15
16 .main {
17 margin: 0 auto;
18 width: 1000px;
19 margin-top: 10px;
20
21 }
22
23 .fixed {
24 position: fixed;
25 top: 0;
26 left: 0;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="top" id="topPart">
32 <img src="images/top.png" alt=""/>
33 </div>
34 <div class="nav" id="navBar">
35 <img src="images/nav.png" alt=""/>
36 </div>
37 <div class="main" id="mainPart">
38 <img src="images/main.png" alt=""/>
39 </div>
40 <script src="js/common.js"></script>
41 <script>
42 //滚动事件
43 function getScroll() {
44 return {
45 top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
46 left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
47 };
48 }
49 window.onscroll = function () {
50 if(getScroll().top >= getId$("topPart").offsetTop){
51 getId$("navBar").style.position = "fixed";
52 getId$("navBar").style.top = "0px";
53 }
54 };
55 </script>
56 </body>
57 </html>
01
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0
10 }
11 img {
12 vertical-align: top;
13 }
14 .mainPart {
15 margin: 0 auto;
16 width: 1000px;
17 margin-top: 10px;
18 }
19 .fixed {
20 position: fixed;
21 top: 0;
22 left: 0;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="topPart" id="topPart">
28 <img src="images/top.png" alt=""/>
29 </div>
30 <div class="navBar" id="navBar">
31 <img src="images/nav.png" alt=""/>
32 </div>
33 <div class="mainPart" id="mainPart">
34 <img src="images/main.png" alt=""/>
35 </div>
36 <script src="js/common.js"></script>
37 <script>
38 //滚动事件
39 function getScroll() {
40 return {
41 top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
42 left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
43 };
44 }
45 window.onscroll = function () {
46 if(getScroll().top >= getId$("topPart").offsetHeight){
47 getId$("navBar").className = "nav fixed";
48 getId$("mainPart").style.marginTop = getId$("navBar").offsetHeight +"px";
49 }else{
50 getId$("navBar").className = "nav";
51 getId$("mainPart").style.marginTop = "10px";
52 }
53 };
54 </script>
55 </body>
56 </html>
最终版本
其中的images链接为：https://files.cnblogs.com/files/zach0812/images.zip
封装动画函数：
复习之前的动画函数 animation() 它是个匀速的函数，因为它的step =10 是个常量，
1 function animation(ele,targetPos) {
2 //清理定时器
3 window.clearInterval(ele.timeId);
4 ele.timeId = setInterval(function () {
5 //获取当前的位置
6 var curPos = ele.offsetLeft;
7 //每次移动的步数
8 var step = 10;
9 step = targetPos > curPos ? step :-step;
10
11 //判断 本次移动后的curPos 和 目标tarPos 的差距
12 if(Math.abs(targetPos - curPos ) > Math.abs(step)){
13 curPos += step;
14 ele.style.left = curPos +'px';
15 }else{
16 window.clearInterval(ele.timeId);
17 ele.style.left = targetPos +'px';
18 }
19 },10);
20 }
View Code
下面我们看的是变速运动。。。变速动画.
实现缓动效果：
即step = (targetPos - curPos)/10;
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0
10 }
11 div{
12 width: 200px;
13 height: 100px;
14 background-color: green;
15 position: absolute;
16 left: 0;
17 top: 0;
18 margin-top: 20px;
19 }
20 </style>
21 </head>
22 <body>
23 <input type="button" value="移动到400px" id="btn1">
24 <input type="button" value="移动到800px" id="btn2">
25 <div id="dv"></div>
26 <script src="js/common.js"></script>
27 <script>
28 function animation(ele,targetPos) {
29 //清理定时器
30 window.clearInterval(ele.timeId);
31 ele.timeId = setInterval(function () {
32 //获取当前的位置
33 var curPos = ele.offsetLeft;
34 //每次移动的步数
35 var step = (targetPos - curPos) / 10;
36 // step = targetPos > curPos ? step :-step; 不需要这个了
37
38 //判断 本次移动后的curPos 和 目标tarPos 的差距
39 if(Math.abs(targetPos - curPos ) > Math.abs(step)){
40 curPos += step;
41 ele.style.left = curPos +'px';
42 }else{
43 window.clearInterval(ele.timeId);
44 ele.style.left = targetPos +'px';
45 }
46 },10);
47 }
48 getId$("btn1").onclick = function(){
49 animation(getId$("dv"),400);
50 };
51 getId$("btn2").onclick = function(){
52 animation(getId$("dv"),800);
53 };
54 </script>
55 </body>
56 </html>
缓动效果
但是这里是有bug 的，因为step 避免不了会出现小数，结果未知不太精准，所以我们要尽可能的使得step 为整数。
而且，当step 为正数的时候要向上取整 Math.ceil() 。为负数的时候向下取整 Math.floor() ..... 每次走可以多走，不可少走。
之所以不可少走是因为当到最后的阶段的时候，step 将会变得很小。如果向下取整就直接为0了，所以 此时的二者直接的距离是一直大于 step 的。这导致程序不能到直接设定为目标位置的分支。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0
10 }
11 div{
12 width: 200px;
13 height: 100px;
14 background-color: green;
15 position: absolute;
16 left: 0;
17 top: 0;
18 margin-top: 20px;
19 }
20 </style>
21 </head>
22 <body>
23 <input type="button" value="移动到400px" id="btn1">
24 <input type="button" value="移动到800px" id="btn2">
25 <div id="dv"></div>
26 <script src="js/common.js"></script>
27 <script>
28 function animation(ele,targetPos) {
29 //清理定时器
30 window.clearInterval(ele.timeId);
31 ele.timeId = setInterval(function () {
32 //获取当前的位置
33 var curPos = ele.offsetLeft;
34 //每次移动的步数
35 var step = (targetPos - curPos) / 10;
36 // step = targetPos > curPos ?Math.ceil(step): Math.floor(step); //正数向上取整 负数向下取整
37 step = Math.ceil(step);
38
39 //判断 本次移动后的curPos 和 目标tarPos 的差距
40 if(Math.abs(targetPos - curPos ) > Math.abs(step)){
41 curPos += step;
42 ele.style.left = curPos +'px';
43 console.log("我停在这个分支了");
44 }else{
45 window.clearInterval(ele.timeId);
46 ele.style.left = targetPos +'px';
47 }
48 },1);
49 }
50 getId$("btn1").onclick = function(){
51 animation(getId$("dv"),400);
52 };
53 getId$("btn2").onclick = function(){
54 animation(getId$("dv"),800);
55 };
56 </script>
57 </body>
58 </html>
此时如果从800 移回400就会发生上述情况。
总结： step 只能向上取整，不能向下取整，这是很严重的问题会导致定时器不能被清理！
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0
10 }
11 div{
12 width: 200px;
13 height: 100px;
14 background-color: green;
15 position: absolute;
16 left: 0;
17 top: 0;
18 margin-top: 20px;
19 }
20 </style>
21 </head>
22 <body>
23 <input type="button" value="移动到400px" id="btn1">
24 <input type="button" value="移动到800px" id="btn2">
25 <div id="dv"></div>
26 <script src="js/common.js"></script>
27 <script>
28 function animation(ele,targetPos) {
29 //清理定时器
30 window.clearInterval(ele.timeId);
31 ele.timeId = setInterval(function () {
32 //获取当前的位置
33 var curPos = ele.offsetLeft;
34 //每次移动的步数
35 var step = (targetPos - curPos) / 10;
36 step = targetPos > curPos ?Math.ceil(step): Math.floor(step); //正数向上取整 负数向下取整
37
38 //判断 本次移动后的curPos 和 目标tarPos 的差距
39 if(Math.abs(targetPos - curPos ) > Math.abs(step)){
40 curPos += step;
41 ele.style.left = curPos +'px';
42 }else{
43 window.clearInterval(ele.timeId);
44 ele.style.left = targetPos +'px';
45 }
46 },1);
47 }
48 getId$("btn1").onclick = function(){
49 animation(getId$("dv"),400);
50 };
51 getId$("btn2").onclick = function(){
52 animation(getId$("dv"),800);
53 };
54 </script>
55 </body>
56 </html>
最终版本
还有到最后的几步都是以 1 向上增加的。所以不用担心超过目标值 ，可以直接用 == 判断
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0
10 }
11 div{
12 width: 200px;
13 height: 100px;
14 background-color: green;
15 position: absolute;
16 left: 0;
17 top: 0;
18 margin-top: 20px;
19 }
20 </style>
21 </head>
22 <body>
23 <input type="button" value="移动到400px" id="btn1">
24 <input type="button" value="移动到800px" id="btn2">
25 <div id="dv"></div>
26 <script src="js/common.js"></script>
27 <script>
28 function animation(ele,targetPos) {
29 //清理定时器
30 window.clearInterval(ele.timeId);
31 ele.timeId = setInterval(function () {
32 //获取当前的位置
33 var curPos = ele.offsetLeft;
34 //每次移动的步数
35 var step = (targetPos - curPos) / 10;
36 step = targetPos > curPos ?Math.ceil(step): Math.floor(step); //正数向上取整 负数向下取整
37
38 if(curPos == targetPos){ //到最后的几步都是以 1 向上增加的。所以不用担心超过目标值 ，可以直接用== 判断。
39 window.clearInterval(ele.timeId);
40 }else{
41 curPos += step;
42 ele.style.left = curPos +"px";
43 }
44 },1);
45 }
46 getId$("btn1").onclick = function(){
47 animation(getId$("dv"),400);
48 };
49 getId$("btn2").onclick = function(){
50 animation(getId$("dv"),800);
51 };
52 </script>
53 </body>
54 </html>
最最终版本
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0
10 }
11 div{
12 width: 200px;
13 height: 100px;
14 background-color: green;
15 position: absolute;
16 left: 0;
17 top: 0;
18 margin-top: 20px;
19 }
20 </style>
21 </head>
22 <body>
23 <input type="button" value="移动到400px" id="btn1">
24 <input type="button" value="移动到800px" id="btn2">
25 <div id="dv"></div>
26 <script src="js/common.js"></script>
27 <script>
28 function animation(ele,targetPos) {
29 //清理定时器
30 window.clearInterval(ele.timeId);
31 ele.timeId = setInterval(function () {
32 //获取当前的位置
33 var curPos = ele.offsetLeft;
34 //每次移动的步数
35 var step = (targetPos - curPos) / 10;
36 step = targetPos > curPos ?Math.ceil(step): Math.floor(step); //正数向上取整 负数向下取整
37
38 curPos += step;
39 ele.style.left = curPos +"px";
40
41 if(curPos == targetPos){ //到最后的几步都是以 1 向上增加的。所以不用担心超过目标值 ，可以直接用== 判断。
42 window.clearInterval(ele.timeId);
43 }
44 //测试代码：
45 console.log("目标位置："+targetPos+" 当前位置："+curPos+" 每次移动的步数： "+step+"");
46
47
48 },1);
49 }
50 getId$("btn1").onclick = function(){
51 animation(getId$("dv"),400);
52 };
53 getId$("btn2").onclick = function(){
54 animation(getId$("dv"),800);
55 };
56 </script>
57 </body>
58 </html>
最最最终版本 （带有测试代码）
测试代码：
console.log("目标位置："+targetPos+" 当前位置："+curPos+" 每次移动的步数： "+step+"");
最后一个系列：
之前说过有 三个系列：
前面已经说过两个系列： offset系列 ，scroll系列，下面是第三个系列！