js應用例子——滑動效果
//設置樣式<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:1000px; height:600px;}
#nei{ width:1000px; height:300px; margin-top:30px;}
#left{ height:300px; background-color:#F00; float:left;}
#right{ height:300px; background-color:#00F; float:left;}
#fk{ width:50px; height:50px; background-color:#FF0; position:relative; top:-175px;}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
<div id="left" style="width:200px;"></div>
<div id="right" style="width:800px;"></div>
</div>
<div id="fk" style="left:-280px;"></div>
</div>
</body>
<script>//給f的按鈕設置點擊事件，點擊f按鈕，幾秒走完
var f= document.getElementById("fk");
f.onclick = function(){
window.setInterval("yidong()",5)
}寫一個yidong()的方法，移動的時候三個變量會發生變化；
左邊div的寬度在增加，右邊的則在減少；按鈕的left也在增加；當左邊增加到規定數值則停止。
註意一點在定義變量時一定要註意document獲得的數據是數字還是像素；不是的話用parseInt強制轉換；
function yidong(){
var l = document.getElementById("left");
var r = document.getElementById("right");
var f = document.getElementById("fk");
var lw = parseInt(l.style.width);
var rw = parseInt(r.style.width);
var fl = parseInt(f.style.left);
if(lw<800){
lw++;
rw--;
fl++;}
l.style.width = lw+"px";
r.style.width = rw+"px";
f.style.left= fl+"px";
}
</script>
js應用例子——滑動效果