(转)javascript关于运动的各种问题经典总结

JS运动框架详解
最新推荐文章于 2022-01-20 22:36:43 发布
转载 最新推荐文章于 2022-01-20 22:36:43 发布 · 88 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/christal-11/p/5669849.html
文章标签：

#javascript #ViewUI

本文详细介绍了JavaScript中物体运动的各种问题及解决方案，包括单物体和多物体的运动控制、透明度变化、尺寸调整等内容，并提供了完整的运动框架代码。

本文实例总结了javascript关于运动的各种问题。分享给大家供大家参考。具体如下：

一、JS运动的各种问题

问题一：

错误代码：

?
1
2
3
4
5
6
7
8
9
10
11
function startMove(){
  var timer= null ;
  var div1=document.getElementById( "div1" );
  if (div1.offsetLeft==300){
   clearInterval(timer);
  } else {
   timer=setInterval( function (){
    div1.style.left=div1.offsetLeft+10+ "px" ;
   },30)
  }
}

希望实现的功能：

打开定时器timer，让div1运动到300px，然后让div1停下即关掉定时器。

错误之处：

if语句错误，代码首先设置一个null定时器timer，然后如果div1的左边距为300px，则关掉定时器timer。否则一直运动。但是if并不是循环语句，if语句执行一次之后将不再执行。所以永远不会关闭定时器。

正确代码：

?
1
2
3
4
5
6
7
8
9
10
var timer= null ;
function startMove(){
  var div1=document.getElementById( "div1" );
  timer=setInterval( function (){
   if (div1.offsetLeft==300){
    clearInterval(timer);
   }
   div1.style.left=div1.offsetLeft+10+ "px" ;
  },30)
}

问题二:
错误代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
function startMove(){
  var speed=1;
  var timer= null ;
  var oDiv1=document.getElementById( "div1" );
  clearInterval(timer);
  timer=setInterval( function (){
   if (oDiv1.offsetLeft>=300){
    clearInterval(timer);
   } else {
    oDiv1.style.left=oDiv1.offsetLeft+speed+ "px" ;
   }
  },30)
}

希望实现的功能：

连续点击开始按钮，div1会加速，这是因为每当点击按钮一次，就会开启一个定时器，累积起来就会加速，所以要在开启定时器之前不管有没有定时器开启都要先关闭一次定时器。但是添加了关闭定时器的clearInterval方法之后，依然会加速。
错误之处：
将timer变量放在了startMove方法里面，相当于每点击一次按钮，就会执行一次startMove方法，生成了一个闭包，因此创建了一个局部timer，每一个闭包当中的timer并不会共享，所以还是相当于生成了点击次数的闭包timer。

正确代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
var timer= null ;
function startMove(){
  var speed=1;
  var oDiv1=document.getElementById( "div1" );
  clearInterval(timer);
  timer=setInterval( function (){
   if (oDiv1.offsetLeft>=300){
    clearInterval(timer);
   } else {
    oDiv1.style.left=oDiv1.offsetLeft+speed+ "px" ;
   }
  },30)
}

实现分享栏进出功能：
代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
< html >
< head lang = "en" >
  < meta charset = "UTF-8" >
  < title ></ title >
  < style type = "text/css" >
   #div1{
    width: 150px;
    height: 200px;
    background: burlywood;
    position: absolute;
    left: -150px;
   }
   span{
    width: 20px;
    height: 60px;
    position: absolute;
    background: gold;
    right: -20px;
    top: 70px;
   }
  </ style >
  < script >
   window.onload=function(){
    var oDiv1=document.getElementById("div1");
    oDiv1.onmouseover=function(){
     move(0);
    };
    oDiv1.onmouseout=function(){
     move(-150);
    };
   };
   var timer=null;
   function move(target){
    var oDiv1=document.getElementById("div1");
    var speed=0;
    if (oDiv1.offsetLeft< target ){
     speed = 10 ;
    }else{
     speed=-10;
    }
    clearInterval(timer);
    timer = setInterval (function(){
     if(oDiv1.offsetLeft==target){
      clearInterval(timer);
     }else{
      oDiv1.style.left =oDiv1.offsetLeft+speed+"px";
     }
    },30);
   }
  </script>
</ head >
< body >
< div id = "div1" >
  < span id = "span1" >分享到</ span >
</ div >
</ body >
</ html >

实现图片淡入淡出功能：
代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title></title>
  <style>
   #div1{
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    filter: alpha(opacity:30);
    opacity: 0.3;
   }
  </style>
  <script>
   window.onload= function (){
    var oDiv1=document.getElementById( "div1" );
    oDiv1.onmouseover= function (){
     move(100);
    };
    oDiv1.onmouseout= function (){
     move(30);
    };
   };
   var timer= null ;
   var alpha=30;
   function move(target){
    var oDiv1=document.getElementById( "div1" );
    var speed=0;
    clearInterval(timer);
    if (alpha<target){
     speed=10;
    } else {
     speed=-10;
    }
    timer=setInterval( function (){
     if (alpha==target){
      clearInterval(timer);
     } else {
      alpha+=speed;
      oDiv1.style.filter= "alpha(opacity:" +alpha+ ")" ;
      oDiv1.style.opacity=alpha/100;
     }
    },30);
   };
  </script>
</head>
<body>
<div id= "div1" >
</div>
</body>
</html>

注意点：

1.因为在透明度上JavaScript并没有像左边距（offsetLeft）这样的属性。所以用一个alpha变量代替。
2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题，ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")"；
  chrome和火狐为oDiv1.style.opacity=alpha/100。
实现滚动条事件：
代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title></title>
  <style type= "text/css" >
   #div1{
    width: 100px;
    height: 100px;
    background: yellowgreen;
    position: absolute;
    bottom: 0px;
    right: 0px;
   }
  </style>
  <script>
   window.onscroll= function (){
    var oDiv=document.getElementById( "div1" );
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
   };
   var timer= null ;
   function move(target){
    var oDiv=document.getElementById( "div1" );
    clearInterval(timer);
    timer=setInterval( function (){
     var speed=(target-oDiv.offsetTop)/10;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (oDiv.offsetTop==target){
      clearInterval(timer);
     } else {
      oDiv.style.top=oDiv.offsetTop+speed+ 'px' ;
     }
    },30)
   };
  </script>
</head>
<body style= "height:2000px;" >
<div id= "div1" ></div>
</body>
</html>

二、JS多物体运动的各种问题

问题一：

希望实现的功能：三个平行div自由的平行缩放。
代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title></title>
  <style>
   div{
    width: 100px;
    height: 50px;
    background: yellow;
    margin: 10px;
   }
  </style>
  <script>
   window.onload= function (){
    var oDiv=document.getElementsByTagName( 'div' );
    for ( var i=0;i<oDiv.length;i++){
     oDiv[i].timer= null ;
     oDiv[i].onmouseover= function (){
      move(300, this );
     };
     oDiv[i].onmouseout= function (){
      move(100, this );
     };
    }
   };
   function move(iTarget,oDiv){
    clearInterval(oDiv.timer);
    oDiv.timer=setInterval( function (){
     var speed=(iTarget-oDiv.offsetWidth)/5;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (iTarget==oDiv.offsetWidth){
      clearInterval(oDiv.timer);
     } else {
      oDiv.style.width=oDiv.offsetWidth+speed+ "px" ;
     }
    },30);
   }
  </script>
</head>
<body>
<div id= "div1" ></div>
<div id= "div2" ></div>
<div id= "div3" ></div>
</body>
</html>

注意事项：

多物体运动如果只是设置一个定时器（设置全局定时器）的话，那么三个div共用一个一个全局定时器，那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作，由于定时器是全局的，那么上一个div的定时器将被覆盖即取消掉，故上一个定时器无法完全地昨晚缩小动作，解决办法是给每一个div设置一个属性timer。

问题二：

希望实现的功能：多图片的淡入淡出。
代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title></title>
  <style>
   div{
    width: 200px;
    height: 200px;
    margin: 10px;
    background: yellow;
    float: left;
    filter: alpha(opacity:30);
    opacity: 0.3;
   }
  </style>
  <script>
   window.onload= function (){
    var oDiv=document.getElementsByTagName( 'div' );
    for ( var i=0;i<oDiv.length;i++){
     oDiv[i].timer= null ;
     oDiv[i].alpha=30;
     oDiv[i].onmouseover= function (){
      move(100, this );
     };
     oDiv[i].onmouseout= function (){
      move(30, this );
     };
    }
   };
   function move(iTarget,obj){
    clearInterval(obj.timer);
    obj.timer=setInterval( function (){
     var speed=(iTarget-obj.alpha)/30;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (obj.alpha==iTarget){
      clearInterval(obj.timer);
     } else {
      obj.alpha+=speed;
      obj.style.filter= "alpha(opacity:" +obj.alpha+ ")" ;
      obj.style.opacity=obj.alpha/100;
     }
    },30);
   }
  </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

希望实现的功能：多物体不同方向的伸缩功能。

代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title></title>
  <style>
   div{
    width: 100px;
    height: 100px;
    margin: 10px;
    background: yellow;
    float: left;
    border: 10px solid black;
   }
  </style>
  <script>
   window.onload= function (){
    var oDiv1=document.getElementById( 'div1' );
    var oDiv2=document.getElementById( 'div2' );
    oDiv1.timer= null ;
    oDiv2.timer= null ;
    oDiv1.onmouseover= function (){
     move( this ,400, 'height' );
    };
    oDiv1.onmouseout= function (){
     move( this ,100, 'height' );
    };
    oDiv2.onmouseover= function (){
     move( this ,400, 'width' );
    };
    oDiv2.onmouseout= function (){
     move( this ,100, 'width' );
    };
   };
   function getStyle(obj,name){
    if (obj.currentStyle){
     return obj.currentStyle[name];
    } else {
     return getComputedStyle(obj, false )[name];
    }
   };
   function move(obj,iTarget,name){
    clearInterval(obj.timer);
    obj.timer=setInterval( function (){
     var cur=parseInt(getStyle(obj,name));
     var speed=(iTarget-cur)/30;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (cur==iTarget){
      clearInterval(obj.timer);
     } else {
      obj.style[name]=cur+speed+ "px" ;
     }
    },30);
   };
  </script>
</head>
<body>
<div id= "div1" ></div>
<div id= "div2" ></div>
</body>
</html>

注意事项：

1.offsetwidth所获得的并不只是物体的纯宽度，还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中，本意是希望图片缩小以1px的速度匀速缩小，但是如果将边框的宽度设置为1px而非0px，那么offsetwidth的值其实是obj的width（注意：不是style.width即不是行间的width）+2，上面这句变成了obj.style.width=obj的width+2-1+“px”；图像反而增大了。解决的办法就是不用offsetwidth，而用obj的width。width通过getStyle方法获得。
2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。

完整的运动框架：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title></title>
  <style>
   #div1{
    width: 200px;
    height: 200px;
    margin: 20px;
    background: yellow;
    border: 5px solid black;
    filter: alpha(opacity:30);
    opacity: 0.3;
   }
  </style>
  <script>
   window.onload= function (){
    var oDiv1=document.getElementById( 'div1' );
    oDiv1.timer= null ;
    oDiv1.onmouseover= function (){
     move( this ,100, 'opacity' );
    };
    oDiv1.onmouseout= function (){
     move( this ,30, 'opacity' );
    };
   };
   function getStyle(obj,name){
    if (obj.currentStyle){
     return obj.currentStyle[name];
    } else {
     return getComputedStyle(obj, false )[name];
    }
   };
   function move(obj,iTarget,name){
    clearInterval(obj.timer);
    obj.timer=setInterval( function (){
     var cur=0;
     if (name== 'opacity' ){
      cur=Math.round(parseFloat(getStyle(obj,name))*100);
     } else {
      cur=parseInt(getStyle(obj,name));
     }
     var speed=(iTarget-cur)/30;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     if (cur==iTarget){
      clearInterval(obj.timer);
     } else {
      if (name== 'opacity' ){
       obj.style.opacity=(cur+speed)/100;
       obj.style.filter= 'alpha(opacity:' +cur+speed+ ')' ;
      } else {
       obj.style[name]=cur+speed+ "px" ;
      }
     }
    },30);
   };
  </script>
</head>
<body>
<div id= "div1" ></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

转载于:https://www.cnblogs.com/christal-11/p/5669849.html

clearInterval()仍然执行剩余代码的解决方案
自学小白成长历程
02-24 1864
//简单移动动画封装 function animate(obj, target) { obj.move = setInterval(function () { if (obj.offsetLeft >= target) { //停止动画 clearInterval(obj.move); //会继续执行完move，然后再停止 } obj.style.left
关于setInterval 的clearInterval 之后的再次调用
优快云_xzy的博客
04-25 2416
一个可爱的DEMO <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
js中clearInterval无效，以及setInterval中断后重新执行
manman的分享
07-05 3万+
clearInterval()失效的原因：setInterval()每执行一次，则返回一个唯一id。所以setInterval()执行了n次，那么需要调用clearInterval()也是nci。出现clearInterval()失效的情况，请查看每次调用setInterval()是否都clearInterval()了。
在调用clearInterval()之后，setInterval()循环仍在运行
qq_37656005的博客
06-24 1705
每次在执行setIntertval之前先clearInterval，否侧会出现clearInterval失效，可以查看一下setInterval返回值，每次都不一样 let timer = null; clearInterval(timer); timer = setInterval(() => { //todo })
setInterval和clearInterval使用遇到clearInterval不起作用
qq_41184981的博客
07-24 3233
//定时调用读取数据点击事件 var autoSender = window.setInterval(function() { $("#readData").click(function() { $.ajax({ url : "PCHanderTag/readNFC", type : "GET", dataType : "json", success :...
javascript关于运动的各种问题经典总结
10-24
本文将深入探讨两个常见的JavaScript运动问题，以及如何修复这些问题。 问题一涉及到的是一个简单的左移动画。开发者希望当元素移动到指定位置时停止运动。在初始的错误代码中，`if`语句用于检查元素是否到达目标...
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
10-23
本文将对JavaScript中实现这些运动效果的方法进行详细总结，并结合具体实例进行分析。 首先来看一下图片放大缩小效果的实现。在这个过程中，我们主要利用了CSS样式以及JavaScript的定时器和DOM操作。通过设置`...
### JavaScript 学习笔记总结、JavaScript
最新发布
04-30
内容概要：本文档《Javascript学习笔记.docx》系统地介绍了JavaScript的基础知识及其应用，涵盖JavaScript的核心概念、DOM操作、事件处理、运动框架、AJAX、面向对象编程以及正则表达式的使用。文档从JavaScript的...
setInterval与clearInterval的使用示例代码
09-04
本篇主要是对setInterval与clearInterval的使用示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
关于setInterval设置倒计时只执行一次，clearInterval停止
weixin_33851429的博客
05-10 860
使用setInterval方法实现如图倒计时，但实际运行只运行了一遍 源代码如下： var s = setInterval(time,1000); var n = 10; function time(）{ //缴费按钮不可用倒计时 if(num>0){ num--; //修改按钮显示文本 $("#z...
clearInterval不起作用？肯定是用法不对
Fly的博客
12-03 1万+
clearInterval不起作用？肯定是用法不对 1.场景 当一个定时器可能会被多次调用的时候，只清理一次肯定会出现没有清理完全的情况，这时候给你的错觉就是“clearInterval不起作用”。 2.用法 var timer = null; var timerList = []; function intervalStart() { intervalEnd(); timer =...
js的clearInterval（）
become a programmer
05-02 4684
clearInterval -- 取消指定的setInterval函数将要执行的代码 clearInterval函数语法 clearInterval(id); clearInterval函数参数 id -- setInterval函数返回的ID 示例 var icolor=0; var iNum=256; var iID=setInterval(set
JavaScript之取消计时器clearInterval()
AlexYBB的专栏
09-03 1277
JavaScript之取消计时器clearInterval()
setInterval()和clearInterval() 用法
热门推荐
依然谈笑春风
08-05 4万+
setInterval()和clearInterval() 用法 一、含义(摘自百度百科) setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法
clearInterval无效的一种原因
hello world
01-20 2591
我这里是在cancel方法中发送ajax请求后再clearInterval的，在cancel方法后面立马调用了其他方法又重复了一遍setInterval。 第二个函数的定时器覆盖了第一个，所以第一个定时器永远也没有办法移除了。 参考： JavaScript clearInterval定时器失效原因 - 无忧之路 - 博客园 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值