javascript關(guān)于運(yùn)動(dòng)的各種問題經(jīng)典總結(jié)
本文實(shí)例總結(jié)了javascript關(guān)于運(yùn)動(dòng)的各種問題。分享給大家供大家參考。具體如下：
一、JS運(yùn)動(dòng)的各種問題
問題一：
錯(cuò)誤代碼：
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)
}
}
希望實(shí)現(xiàn)的功能：
打開定時(shí)器timer，讓div1運(yùn)動(dòng)到300px，然后讓div1停下即關(guān)掉定時(shí)器。
錯(cuò)誤之處：
if語句錯(cuò)誤，代碼首先設(shè)置一個(gè)null定時(shí)器timer，然后如果div1的左邊距為300px，則關(guān)掉定時(shí)器timer。否則一直運(yùn)動(dòng)。但是if并不是循環(huán)語句，if語句執(zhí)行一次之后將不再執(zhí)行。所以永遠(yuǎn)不會(huì)關(guān)閉定時(shí)器。
正確代碼：
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)
}
問題二:
錯(cuò)誤代碼：
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)
}
希望實(shí)現(xiàn)的功能：
連續(xù)點(diǎn)擊開始按鈕，div1會(huì)加速，這是因?yàn)槊慨?dāng)點(diǎn)擊按鈕一次，就會(huì)開啟一個(gè)定時(shí)器，累積起來就會(huì)加速，所以要在開啟定時(shí)器之前不管有沒有定時(shí)器開啟都要先關(guān)閉一次定時(shí)器。但是添加了關(guān)閉定時(shí)器的clearInterval方法之后，依然會(huì)加速。
錯(cuò)誤之處：
將timer變量放在了startMove方法里面，相當(dāng)于每點(diǎn)擊一次按鈕，就會(huì)執(zhí)行一次startMove方法，生成了一個(gè)閉包，因此創(chuàng)建了一個(gè)局部timer，每一個(gè)閉包當(dāng)中的timer并不會(huì)共享，所以還是相當(dāng)于生成了點(diǎn)擊次數(shù)的閉包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)
}
實(shí)現(xiàn)分享欄進(jìn)出功能：
代碼：
<!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>
實(shí)現(xiàn)圖片淡入淡出功能：
代碼：
<!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>
注意點(diǎn)：
1.因?yàn)樵谕该鞫壬螶avaScript并沒有像左邊距（offsetLeft）這樣的屬性。所以用一個(gè)alpha變量代替。
2.JavaScript代碼中的行間透明度設(shè)置上需要考慮瀏覽器的兼容問題，ie瀏覽器設(shè)置方法為oDiv1.style.filter="aplha(opacity:"+aplha+")"；
chrome和火狐為oDiv1.style.opacity=alpha/100。
實(shí)現(xiàn)滾動(dòng)條事件：
代碼：
<!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多物體運(yùn)動(dòng)的各種問題
問題一：
希望實(shí)現(xiàn)的功能：三個(gè)平行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>
注意事項(xiàng)：
多物體運(yùn)動(dòng)如果只是設(shè)置一個(gè)定時(shí)器（設(shè)置全局定時(shí)器）的話，那么三個(gè)div共用一個(gè)一個(gè)全局定時(shí)器，那么當(dāng)一個(gè)div沒有完成縮小動(dòng)作的時(shí)候另一個(gè)div開啟定時(shí)器執(zhí)行伸展動(dòng)作，由于定時(shí)器是全局的，那么上一個(gè)div的定時(shí)器將被覆蓋即取消掉，故上一個(gè)定時(shí)器無法完全地昨晚縮小動(dòng)作，解決辦法是給每一個(gè)div設(shè)置一個(gè)屬性timer。
問題二：
希望實(shí)現(xiàn)的功能：多圖片的淡入淡出。
代碼：
<!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>
希望實(shí)現(xiàn)的功能：多物體不同方向的伸縮功能。
代碼：
<!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>
注意事項(xiàng)：
1.offsetwidth所獲得的并不只是物體的純寬度，還有物體的變寬以及外邊距。那么在obj.style.width=obj.offsetwidth-1+"px";這句中，本意是希望圖片縮小以1px的速度勻速縮小，但是如果將邊框的寬度設(shè)置為1px而非0px，那么offsetwidth的值其實(shí)是obj的width（注意：不是style.width即不是行間的width）+2，上面這句變成了obj.style.width=obj的width+2-1+“px”；圖像反而增大了。解決的辦法就是不用offsetwidth，而用obj的width。width通過getStyle方法獲得。
2.getStyle方法得到的是string。需要用parseint強(qiáng)制轉(zhuǎn)換成數(shù)字類型。
完整的運(yùn)動(dòng)框架：
<!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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript 獲取url參數(shù)和script標(biāo)簽中獲取url參數(shù)函數(shù)代碼
不要在方法中調(diào)用方法，否則可能始終獲取的是最后一個(gè)js的文件的參數(shù)，要在方法中使用，請(qǐng)先用變量保存，在方法中直接獲取2010-01-01
JavaScript實(shí)現(xiàn)生成動(dòng)態(tài)表格和動(dòng)態(tài)效果的方法詳解
這篇文章主要介紹了如何通過JavaScript語言實(shí)現(xiàn)動(dòng)圖表格的生成以及動(dòng)態(tài)效果的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-02-02
javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對(duì)數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01
詳解javascript中對(duì)數(shù)據(jù)格式化的思考
本篇文章主要介紹了詳解javascript中對(duì)數(shù)據(jù)文本格式化的思考 ，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
下面小編就為大家?guī)硪黄ㄓ脽o限極下拉菜單的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
在前端開發(fā)的過程中,我們經(jīng)常會(huì)遇到需要對(duì)于輸入的字符串進(jìn)行格式化處理,下面這篇文章主要給大家介紹了關(guān)于如何輕松在JavaScript中字符串的字符之間添加空格的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了點(diǎn)擊更換背景顏色或圖片的js代碼，需要的朋友可以參考一下2013-06-06
如何在一段文字里點(diǎn)一下就可以在里面插入一段文字？
如何在一段文字里點(diǎn)一下就可以在里面插入一段文字？...2007-01-01
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)五星好評(píng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
基于layui實(shí)現(xiàn)高級(jí)搜索（篩選）功能
這篇文章主要為大家詳細(xì)介紹了基于layui實(shí)現(xiàn)高級(jí)搜索、篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07