Javascript運動基礎
javascript的運動非常實用，通過控制需要運動塊的實際距離與要到達的距離的關系，結合定時器來控制小方塊的各種運動。
運動框架
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<input id="btn" type="button" value="start" onclick="move()"></input>
<script type="text/javascript">
var timer=null;
function move(){
var oDiv1=document.getElementById('div1');
clearInterval(timer); //進函數之前先清空一下其他定時器，保證每一次進入僅啟用一個定時器。
timer=setInterval(function(){
var speed=10; //通過控制速度值的大小來決定運動的快慢
if(oDiv1.offsetLeft>=300){ //停止條件
clearInterval(timer); //符合條件則停止，清空定時器
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px'; //不符合條件則繼續運動
}
},30) //每隔30毫秒運動一次
}
</script>
</body>
</html>
運動框架，控制速度快慢的條件有兩個：1.定時器的時間，2.速度 。 一般不建議第一種，時間一般都是通過精密計算思考，定了就不改，大多可采用修改speed變量來控制速度快慢。
eg1：分享到側邊欄效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: red;
width: 150px;
height: 200px;
position: absolute;
left: -150px;
top: 50px;
}
#div1 span{
background-color: green;
width: 20px;
height: 80px;
position: absolute;
right: -20px;
top: 80px;
}
</style>
</head>
<body>
<div id="div1"><span>分享到</span>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function(){
move(0);
};
oDiv1.onmouseout=function(){
move(-150);
}
};
var timer=null;
function move(destion){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(oDiv1.offsetLeft>destion) //通過實際距離與目標地址的差距來決定速度的正負，可省略函數的一個速度參數，若實際距離大于目標地址，則速度為負值
{
speed=-10;
}
else //否則，實際距離小于目標距離，速度為正值
{
speed=10;
}
if(oDiv1.offsetLeft==destion)
{
clearInterval(timer);
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>
eg2：圖片的淡入淡出效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
height: 200px;
width: 200px;
background-color: red;
filter: alpha(opacity:30) ; /*兼容ie */
opacity: 0.3; /*火狐，谷歌*/
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
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');
clearInterval(timer);
timer=setInterval(function(){
var speed;
if (alpha<target) //判斷目前的透明度與目標透明度的差距決定速度正負
{
speed=10;
}
else{
speed=-10;
}
if(alpha==target)
{
clearInterval(timer);
}
else{
alpha+=speed;
oDiv1.style.filter='alpha(opacity:'+alpha+')';
oDiv1.style.opacity=alpha/100;
}
},30);
}
</script>
</body>
</html>
eg3：緩沖運動：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
}
#div2{
width: 1px;
height: 300px;
background-color: black;
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<input type="button" value="start" onclick="move()"></input>
<script type="text/javascript">
function move(){
var oDiv1=document.getElementById('div1');
setInterval(function(){
var speed=(300- oDiv1.offsetLeft)/10; //在不同時刻距目標地的距離會越來越短，除一個固定的值，速度也會越來越小
speed=speed>0?Math.ceil(speed):Math.floor(speed); //向左向右 對速度向上取整或向下取整，px是最小像素值，計算機最小距離單位，會自動向下取整，不會四舍五入，速度成0.9的時候，計算機無法識別，因此不會走到你預期的位置，就會停。針對不同的方向，對他向上或向下取整。
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
},30)
}
</script>
</body>
</html>
eg4：緩沖運動使方塊固定到右下角
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 150px;
position: absolute;
background-color: red;
right: 0;
bottom: 0;
}
</style>
</head>
<body style="height: 2000px">
<div id="div1"></div>
<script type="text/javascript">
window.onscroll=function(){
var oDiv1=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //做瀏覽器的兼容
//oDiv1.style.top=(document.documentElement.clientHeight - oDiv1.offsetHeight)/2+scrollTop+'px';
move(document.documentElement.clientHeight - oDiv1.offsetHeight+scrollTop);
};
var timer=null;
function move(target){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=(target - oDiv1.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv1.offsetTop==target)
{
clearInterval(timer);
}
else{
oDiv1.style.top=oDiv1.offsetTop+speed+'px';
}
},30)
}
</script>
</body>
</html>
eg5:緩沖運動固定到右側中間
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 150px;
position: absolute;
background-color: red;
right: 0;
bottom: 0;
}
</style>
</head>
<body style="height: 2000px">
<div id="div1"></div>
<script type="text/javascript">
window.onscroll=function(){
var oDiv1=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//oDiv1.style.top=(document.documentElement.clientHeight - oDiv1.offsetHeight)/2+scrollTop+'px';
move(parseInt((document.documentElement.clientHeight - oDiv1.offsetHeight)/2+scrollTop));
}
var timer=null;
function move(target){
clearInterval(timer);
var oDiv1=document.getElementById('div1');
timer=setInterval(function(){
var speed=(target - oDiv1.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv1.offsetTop==target)
{
clearInterval(timer);
}
else{
oDiv1.style.top=oDiv1.offsetTop+speed+'px';
}
},30)
}
</script>
</body>
</html>
eg8：勻速運動 固定到某一具體位置
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
}
#div2{
width: 1px;
height: 300px;
background-color: black;
position: absolute;
left: 100px;
}
#div3{
width: 1px;
height: 300px;
background-color: black;
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<input type="button" value="start100" onclick="move(100)"></input>
<input type="button" value="start300" onclick="move(300)"></input>
<script type="text/javascript">
var timer=null;
function move(target){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
setInterval(function(){
var speed=0;
clearInterval(timer);
if(oDiv1.offsetLeft<target){
speed=7;
}
else{
speed=-7;
}
if(Math.abs(target- oDiv1.offsetLeft)<=7) //當遇到接近但到不了的情況，可將它的近似看做已到達，防止抖動
{
clearInterval(timer);
oDiv1.style.left=target+'px'; //手動將他的距離改為目標距離
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>
以上總結了js中運動的基礎，可將代碼復制查看效果
浙公網安備 33010602011771號