JavaScript妙味課堂，物體平移運動特效_圖片特效特效

JavaScript妙味課堂上的一個教學實例，物體平移運動特效，點擊按鈕后激活函數，控制圖片在一定時間內勻速運動，是最簡單、最基礎的運動方式，其特點是運動的方向和速度都不發生改變。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /> 
<title>JavaScript物體平移運動特效</title> 
<style> 
#div1 {background:url(http://p1.mb5u.com/texiao/1/20110225160555629.gif); position:absolute; left:50px; top:50px; width:200px; height:200px;}
</style> 
<script type="text/javascript"> 
var g_oTimer=null;
 
function startMove()
{
	if(!g_oTimer)
	{
		g_oTimer=setInterval(moveTimerHandler, 30);
	}
}
 
function moveTimerHandler()
{
	var oDiv=document.getElementById('div1');
	var iSpeed=5;
	
	if(oDiv.offsetLeft>=300)
	{
		clearInterval(g_oTimer);
		g_oTimer=null;
	}
	else
	{
		oDiv.style.left=oDiv.offsetLeft + iSpeed + 'px';
	}
}
 
window.onload=function ()
{
	var oBtn=document.getElementById('btn_start_move');
	
	oBtn.onclick=startMove;
};
</script> 
</head> 
 
<body> 
<div   class="xvldv75"   id="div1"></div> 
<input id="btn_start_move" type="button" value="開始運動" /> 
</body> 
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-14

[收藏][報錯][返回列表]

相關圖片特效特效：

JavaScript妙味課堂，物體平移運動特效_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些

JavaScript妙味課堂，物體平移運動特效_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些

JavaScript妙味課堂，物體平移運動特效_圖片特效特效