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 id="div1"></div> 
<input id="btn_start_move" type="button" value="开始运动" /> 
</body> 
</html>

所属频道：图片特效特效/更新时间：2012-11-14

[收藏][报错][返回列表]

JavaScript妙味课堂，物体平移运动特效_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些