本文实例总结了javascript关于运动的各种问题。分享给大家供大家参考。具体如下：
一、JS运动的各种问题
问题一：
错误代码：
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语句执行一次之后将不再执行。所以永远不会关闭定时器。
正确代码：
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)
}
问题二:
错误代码：
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。
正确代码：
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)
}
实现分享栏进出功能：
代码：
<!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>
实现图片淡入淡出功能：
代码：
<!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。
实现滚动条事件：
代码：
<!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"height:2000px;">
<div id="div1"></div>
</body>
</html>
二、JS多物体运动的各种问题
问题一：
希望实现的功能：三个平行div自由的平行缩放。
代码：
<!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"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。
问题二：
希望实现的功能：多图片的淡入淡出。
代码：
<!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"alpha(opacity:"+obj.alpha+")";
obj.style.opacity=obj.alpha/100;
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
希望实现的功能：多物体不同方向的伸缩功能。
代码：
<!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"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强制转换成数字类型。
完整的运动框架：
<!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"px";
}
}
},30);
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
标签：
javascript,运动问题
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“javascript关于运动的各种问题经典总结”评论...
更新动态
2024年11月15日
2024年11月15日
- 黄乙玲1988-无稳定的爱心肝乱糟糟[日本东芝1M版][WAV+CUE]
- 群星《我们的歌第六季 第3期》[320K/MP3][70.68MB]
- 群星《我们的歌第六季 第3期》[FLAC/分轨][369.48MB]
- 群星《燃！沙排少女 影视原声带》[320K/MP3][175.61MB]
- 乱斗海盗瞎6胜卡组推荐一览 深暗领域乱斗海盗瞎卡组分享
- 炉石传说乱斗6胜卡组分享一览 深暗领域乱斗6胜卡组代码推荐
- 炉石传说乱斗本周卡组合集 乱斗模式卡组最新推荐
- 佟妍.2015-七窍玲珑心【万马旦】【WAV+CUE】
- 叶振棠陈晓慧.1986-龙的心·俘虏你（2006复黑限量版）【永恒】【WAV+CUE】
- 陈慧琳.1998-爱我不爱（国）【福茂】【WAV+CUE】
- 咪咕快游豪礼放送，百元京东卡、海量欢乐豆就在咪咕咪粉节！
- 双11百吋大屏焕新“热”，海信AI画质电视成最大赢家
- 海信电视E8N Ultra：真正的百吋，不止是大！
- 曾庆瑜1990-曾庆瑜历年精选[派森][WAV+CUE]
- 叶玉卿1999-深情之选[飞图][WAV+CUE]