欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js代码实现:点击后商品飞进购物车(抛物线)

程序员文章站 2022-07-27 22:02:57
js代码实现:点击后商品飞进购物车(抛物线)

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>