我最終的目的是用源生JS代碼封裝一個domove（）函數，可以在傳參之後實現元素任意方向的運動，在達到最終目的前應該一步一步地完成：
1.配合之前封裝過的getstyle()函數，實現點擊按鈕之後讓一個div向前移動10px的效果：
<body>
<button id="btn">前進</button>
<div id="div1" style="width:100px; height:100px; background:red; margin-top:20px; position:absolute;"></div>
<script>
var oBtn=document.getElementById("btn");
var oDiv=document.getElementById("div1");
function getstyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
oBtn.onclick=function(){
var nowPosition =parseInt(getstyle(oDiv,'left'));
oDiv.style.left=nowPosition+10+'px';
}
</script>
</body>2.用兩個按鈕分別控制div向前向後動
3.把div向前向後動改成上下左右移動
·
·
·
按照這樣的思路，再結合計時器，最終一步步實現一點按鈕就能使元素連貫地變到目的的樣式：
function doMove(id,derection,speed,subjectPosition){
//id:要運動的元素；derection:以什麼方向爲參照來運動（left、right、top、bottom）;speed:計時器每循環一次移動的距離；subjectPosition：運動所要達到的樣式的值
speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;//判斷運動的方向
clearInterval(getid(id).timer);
getid(id).timer=setInterval(function(){
var nowPosition =parseInt(getstyle(getid(id),derection));
var thisPosition=nowPosition+speed;
if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
//判斷有無達到目標點
thisPosition=subjectPosition;
clearInterval(getid(id).timer);
}
getid(id).style[derection]=thisPosition+'px';
},30)
}例如：模擬一些網頁，做一個“點擊有驚喜”的效果。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1{width:800px; height:800px; background:#000; position:relative;left:50%; margin-left:-400px;}
#div2{width:30px; height:200px; background:#666; color:#fff;text-align:center; padding-top:50px; position:absolute; right:0; top:40%; cursor:pointer;}
#div3{width:80px; height:200px; background:#69F; color:#909;text-align:center; padding-top:50px; position:absolute; right:-80px; top:40%;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">點擊有驚喜</div>
<div id="div3">啦啦啦啦啦啦我就是驚喜！</div>
</div>
<script src="myjs/myjs.js"></script>
<script>
var click=true;
getid('div2').onclick =function(){
if(click==true){
doMove('div2','right',10, parseInt(getstyle(getid('div3'),'width')));
doMove('div3','right',10,0);
click=false;
}else{
doMove('div2','right',10,0);
doMove('div3','right',10,-parseInt(getstyle(getid('div3'),'width')));
click=true;
}
}
function doMove(id,derection,speed,subjectPosition){
speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
clearInterval(getid(id).timer);
getid(id).timer=setInterval(function(){
var nowPosition =parseInt(getstyle(getid(id),derection));
var thisPosition=nowPosition+speed;
if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
thisPosition=subjectPosition;
clearInterval(getid(id).timer);
}
getid(id).style[derection]=thisPosition+'px';
},30)
}
</script>
</body>未點擊之前：
點擊之後：
domove()函數封裝好了，接下來說一下javascript的回調函數：
1.定義：回調函數就是把我們一個函數執行完畢後再隨即執行的一個函數；
2.但是回調函數不是一定有的，因此在一段程序結束的地方需要做一個判斷：if(endFn){endFn();}
也可以寫爲：endFn&&endFn();
這兩者等價
注：未定義就返回未定義，否則在一段程序執行完後緊接着執行回調函數裏面的內容。
例：利用回調函數讓一個div做向右、向下、向左再向上回到原點的運動（當然，運動到上、下、左、右的邊界值都已經提前設定好）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red; position:absolute; top:40px; left:40px;}
</style>
</head>
<body>
<input type="button" value="走" id="btn1" />
<div id="div1"></div>
<script src="myjs/myjs.js"></script>
<script>
getid('btn1').onclick =function(){
doMove('div1','left',10,800,function endFn(){
doMove('div1','top',10,500,function endFn(){
doMove('div1','left',10,40,function endFn(){
doMove('div1','top',10,40);
})
});
});
};
function doMove(id,derection,speed,subjectPosition,endFn){
speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
clearInterval(getid(id).timer);
getid(id).timer=setInterval(function(){
var nowPosition =parseInt(getstyle(getid(id),derection));
var thisPosition=nowPosition+speed;
if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
thisPosition=subjectPosition;
}
getid(id).style[derection]=thisPosition+'px';
if(parseInt(getstyle(getid(id),derection))===subjectPosition){
clearInterval(getid(id).timer);
endFn&&endFn();
}
},30)
}
</script>
</body>接下來就是關於以上內容的練習：
練習1：寫四個按鈕，分別是“向左”、“向右”、“向上”和“向下”，點擊哪個按鈕就讓元素向相應的方向移動，並且遇到四邊設定的邊界就停止運動
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red; position:absolute; top:40px; left:40px;}
</style>
</head>
<body>
<input type="button" value="向右" id="btn1" />
<input type="button" value="向左" id="btn2" />
<input type="button" value="向下" id="btn3" />
<input type="button" value="向上" id="btn4" />
<div id="div1"></div>
<script src="myjs/myjs.js"></script>
<script>
getid('btn1').onclick =function(){doMove('div1','left',10,800);};
getid('btn2').onclick =function(){doMove('div1','left',10,40);};
getid('btn3').onclick =function(){doMove('div1','top',10,800);};
getid('btn4').onclick =function(){doMove('div1','top',10,40);};
function doMove(id,derection,speed,subjectPosition){
speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
clearInterval(getid(id).timer);
getid(id).timer=setInterval(function(){
var nowPosition =parseInt(getstyle(getid(id),derection));
var thisPosition=nowPosition+speed;
if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
thisPosition=subjectPosition;
clearInterval(getid(id).timer);
}
getid(id).style[derection]=thisPosition+'px';
},30)
}
</script>
</body>練習2：在頁面上佈局平鋪20個50X50紅色的方塊，點擊我們的瀏覽器的窗口時讓每個方塊每隔0.2秒以每0.1秒30像素的速度掉下來一個，直到所有的方塊掉到500的位置
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
ul,li{margin:0; padding:0;}
li{list-style:none;width:50px; height:50px; background:#666; position:absolute; top:0;;}
</style>
</head>
<ul id="ul1">
</ul>
<body>
<script src="myjs/myjs.js"></script>
<script>
var oUl1=document.getElementById("ul1");
var aLi=oUl1.getElementsByTagName("li");
var str="";
for(var i=0;i<20;i++){
str+="<li></li>";
}
oUl1.innerHTML=str;
for(var i=0;i<20;i++){
aLi[i].style.left=(i+1)*51+"px";
}
window.onclick=function(){
var i=0;
setInterval(function(){
doMove(aLi[i],'top',30,500);
i++;
},200)//此處是在計時器裏的循環，相當於雙重循環
}
function doMove(id,derection,speed,subjectPosition){
speed= parseInt(getstyle(getid(id),derection))> subjectPosition? -speed : speed;
clearInterval(getid(id).timer);
getid(id).timer=setInterval(function(){
var nowPosition =parseInt(getstyle(getid(id),derection));
var thisPosition=nowPosition+speed;
if(thisPosition>=subjectPosition&&speed>0||thisPosition<=subjectPosition&&speed<0){
thisPosition=subjectPosition;
clearInterval(getid(id).timer);
}
getid(id).style[derection]=thisPosition+'px';
},30)
}
</script>
</body>效果圖大致是這樣的：
2.正反方向“有縫”輪播圖（哈哈，後面再說無縫輪播圖）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="common.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
#ul1{position:relative;}
#ul1 li{width:400px; height:500px; float:left;}
#div1{width:400px; height:500px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; overflow:hidden;}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1" class="clearfix">
<li><img src="img/1.png" width="400" height="500"/></li>
<li><img src="img/2.png" width="400" height="500"/></li>
<li><img src="img/3.png" width="400" height="500"/></li>
<li><img src="img/4.png" width="400" height="500"/></li>
</ul>
</div>
<button>正方向輪播</button>
<button>反方向輪播</button>
<script src="myjs/myjs.js"></script>
<script>
var aBtn=document.getElementsByTagName("button");
var timer=null;
var num=0;
var aLi =getid('ul1').getElementsByTagName('li');
aBtn[0].onclick=function(){fn(aLi.length-1,0,"++");}
aBtn[1].onclick=function(){fn(0,aLi.length-1,"--");}
/*將變換圖片輪播方向的這段代碼封裝在JS文件內。
aBtn[0].onclick=function(){
clearInterval(timer);
var aLi =getid('ul1').getElementsByTagName('li');
getid('ul1').style.width = parseInt(getstyle(aLi[0],'width'))*aLi.length +'px';
var num = 1;
timer=setInterval(function(){
doMove('ul1','left',20,-num*parseInt(getstyle(aLi[0],'width')));
if(num ==aLi.length-1){
num = 0;
}else{
num++;
}
},4000);
}
aBtn[1].onclick=function(){
clearInterval(timer);
var aLi =getid('ul1').getElementsByTagName('li');
getid('ul1').style.width = parseInt(getstyle(aLi[0],'width'))*aLi.length +'px';
var num = 3;
timer=setInterval(function(){
doMove('ul1','left',20,-num*parseInt(getstyle(aLi[0],'width')));
if(num ==0){
num = aLi.length-1;
}else{
num--;
}
},4000);
}*/
</script>
</body>