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

 　 　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程序设计有所帮助。

时间： 2024-10-28 00:47:52

javascript关于运动的各种问题经典总结的相关文章

javascript关于运动的各种问题经典总结_javascript技巧

本文实例总结了javascript关于运动的各种问题.分享给大家供大家参考.具体如下: 一.JS运动的各种问题 问题一: 错误代码: function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInterval(timer); }else{ timer=setInterval(function(){ div1.style.l

JavaScript缓冲运动实现方法(2则示例)_javascript技巧

本文实例讲述了JavaScript缓冲运动实现方法.分享给大家供大家参考,具体如下: 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):

javascript弹性运动效果简单实现方法_javascript技巧

本文实例讲述了javascript弹性运动效果简单实现方法.分享给大家供大家参考,具体如下: 弹性运动实现原理:加速运动+减速运动+摩擦运动 运行效果截图如下: 实例代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px

Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)_javascript技巧

大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov

JavaScript完美运动框架的进阶之旅

运动框架的实现思路   运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止.   现在按照以下步骤来进行我们的运动框架的封装:   匀速运动.   缓冲运动.   多物体运动.   任意值变化.   链式运动.   同时运动.   (一)匀速运动   速度动画   运动基础   思考:如何让div动起来? 如下:   设置元素为绝对定位,只有绝对定位后,left,top等值才生效.   定时器的使用(动态改变值),这里使用setI

JavaScript 创建运动框架的实现代码_基础知识

封装好的运动框架Move(obj,attr,iTarget),可直接调用: 可用于设置width.border.fontSize.marginLeft.opacity等许多常见属性值的变速变化,实现各种有趣效果. 兼容IE和FF. 复制代码 代码如下: /****************    *    *   IE-BUG:    *   在IE中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值.    *    *   obj:元素对象.   at

收藏Javascript中常用的55个经典技巧_javascript技巧

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false" 

this,this,再次讨论javascript中的this,超全面(经典)_javascript技巧

JavaScript 是一种脚本语言,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.本文仅采撷其中的一例:JavaScript 中的 this 关键字,深入浅出的分析其在不同情况下的含义,形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法.可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛.  至于js中this这

JavaScript运动减速效果实例分析_javascript技巧

本文实例讲述了JavaScript运动减速效果.分享给大家供大家参考.具体如下: 这段代码可帮助利用JS从事游戏编程的朋友,它主要实现一种运行减速缓冲的效果,代码精简,很不错. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">