js 抛物线

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
 
<div style="width:800px;height:1000px;border: 1px solid green;clear: both;margin: auto;">
<div style="width:780px;height:900px;float:left;border: 1px solid red;clear: both">1</div>
<s style="width:48PX;height: 13px;position: absolute;border: 1px solid red;left: 100px;top:800px"></s>
 
<div><button onclick="moveImg(this);">移动</button></div>
</div>
 
 
</body>
<script type="text/javascript">
 
function move(obj , Vx, Vy , g , t ,maxX ,minY ){
	var tempVx = parseInt(Vx );
	var tempVy = parseInt(Vy );
	var x =100;
	var y =800 ;

	var i = setInterval(function(){
		x =x + tempVx * t ;
		tempVy = tempVy + g * t;
		y =y + tempVy * t  ;
		 
		obj.style.left=x +"px";
		obj.style.top= y +"px";

		if( x>=maxX || y <= minY || y>2000){
			clearInterval(i);
		}
	},t);
}
 
function moveImg( obj ){
	var pDiv = obj.parentNode.parentNode;
	var moveS = pDiv.getElementsByTagName("s")[0] ;

	var minY = obj.parentNode.parentNode.offsetTop ;
	var maxX = parseInt(obj.parentNode.parentNode.offsetLeft) + parseInt(obj.parentNode.parentNode.style.width);
	move(moveS,3,-3,0.01,1,maxX ,minY );

}

</script>
</html>
 
 
抛物线使用

你可能感兴趣的:(JavaScript)