javascript关于运动的各种问题经典总结
更新时间：2015年04月27日 09:40:31 作者：亲爱的汉尼拔
这篇文章主要介绍了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.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?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自由的平行缩放。
代码：
<!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。
问题二：
希望实现的功能：多图片的淡入淡出。
代码：
<!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>
希望实现的功能：多物体不同方向的伸缩功能。
代码：
<!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强制转换成数字类型。
完整的运动框架：
<!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程序设计有所帮助。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了微信小程序将页面按钮悬浮固定在底部的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
reduce是数组原型对象上的一个方法，可以帮助我们操作数组。本文将和大家分享4个关于JavaScript中数组reduce的用法，希望对大家有所帮助2022-07-07
这篇文章主要为大家详细介绍了微信小程序云开发实现分页刷新获取数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家介绍了WebRTC媒体权限申请getUserMedia实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
hta实现的字数统计效果代码，中文算两个，英文算一个2008-02-02
这篇文章主要介绍了微信小程序动画Animation执行过程 / 实现过程 / 实现方式，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下2016-07-07
JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器
JavaScript 操作键盘的Enter事件（键盘任何事件），支持各种浏览器，需要的朋友可以参考下。2010-10-10
取消单选按钮选中的方法有很多，下面为大家详细介绍下使用js是如何实现的，感兴趣的朋友不要错过2013-11-11
这篇文章主要介绍了JavaScript实现拖拽网页内元素的方法,以注释形式较为详细的分析了javascript事件监听、元素定位的相关技巧,并配有详细的注释以便于理解,需要的朋友可以参考下2015-04-04
最新评论