脚本宝典收集整理的这篇文章主要介绍了js实例教程-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>
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> 觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-js代码实现：点击后商品飞进购物车（抛物线）全部内容，希望文章能够帮你解决js实例教程-js代码实现：点击后商品飞进购物车（抛物线）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。