javascript關于運動的各種問題經典總結

2024-05-06 16:18:50

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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>