当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js代码实现：点击后商品飞进购物车（抛物线）

js代码实现：点击后商品飞进购物车（抛物线）

2018年06月12日  | 移动技术网IT编程  | 我要评论

js代码实现：点击后商品飞进购物车（抛物线）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#sBox{
				position: absolute;
				left: 50px;
				top: 500px;
				width: 50px;
				height: 50px;
				background: red;
			}
			#cart{
				position: fixed;
				top: 50px;
				right: 20px;
				width: 100px;
				height: 40px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<p id="sBox">某商品</p>
		<p id="cart">购物篮</p>
		<input type="button" name="btn" id="btn" value="抛物线" />
		<script type="text/javascript">
			var oSbox = document.getElementById("sBox");
			var oCart = document.getElementById("cart");
			var oBtn = document.getElementById("btn");
			var timer = null;
			var count = 0;
			oBtn.onclick = function(){
				
				var x1 = oSbox.offsetLeft;
				var y1 = oSbox.offsetTop;
				
				var x2 = oCart.offsetLeft;
				var y2 = oCart.offsetTop;
				
				//平移抛物经过原点，可以得到c==0
				//已知a
				
		
				
				var a = 0.0005;
				
				var b = (y2-y1 - a*(x2-x1)*(x2-x1))/(x2-x1);
				
				timer = setInterval(function(){
					count+=10;
					var x = count;
					var y = a*x*x + b*x;
					
					oSbox.style.left = x1 + x + "px";
					oSbox.style.top = y1 + y + "px";
					
					if(oSbox.offsetLeft >= x2){
						clearInterval(timer);
					}
					
					
					
					
				},30)
				
				
				
				
				
			}
		</script>
	</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网