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> 上一篇： 校园里的爆笑小朋友