js 抛物线

最新推荐文章于 2015-11-26 15:07:15 发布

wangzhantao

最新推荐文章于 2015-11-26 15:07:15 发布

阅读量65

点赞数

分类专栏： web 前端处理文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/wangzhantao/article/details/84379067

版权

web 前端处理专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<!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 οnclick="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>
 
 
抛物线使用

wangzhantao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 抛物线

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html
复制链接

扫一扫

专栏目录