原生js实现点击添加购物车按钮出现飞行物飞向购物车

Posted zlf1914

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现点击添加购物车按钮出现飞行物飞向购物车相关的知识,希望对你有一定的参考价值。

效果演示:

技术图片

思路:核心->抛物线公式

1 let a = -((y2-y3)*x1 - (x2-x3)*y1 + x2*y3 - x3*y2) / ((x2-x3) * (x1-x2) * (x1-x3));
2 let b = ((y2-y3)*x1*x1 + x2*x2*y3 - x3*x3*y2 - (x2*x2 - x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
3 let c = ((x2*y3 - x3*y2)*x1*x1 - (x2*x2*y3 - x3*x3*y2)*x1 + (x2*x2*x3 - x2*x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));

(x1,y1)----起点坐标  (x2,y2) ----终点坐标 (x3,y3)----最高点坐标

上面的公式主要是来求飞行物top值的,公式 ----top = a*x1*x1+b*x1+c

好了我们来看下完整的代码

技术图片
 1 .tian{
 2                 width: 100px;
 3                 height: 30px;
 4                 background-color: orange;
 5                 line-height: 30px;
 6                 text-align: center;
 7                 position: absolute;
 8                 left:300px;
 9                 bottom: 40px;
10                 cursor: pointer;
11             }
12             .car{
13                 width: 40px;
14                 height: 40px;
15                 background-color: #9D2933;
16                 position: fixed;
17                 text-align: center;
18                 line-height: 40px;
19                 color:white;
20                 right:40px;
21                 top:200px;
22             }
23             .fly{
24                 width: 20px;
25                 height: 20px;
26                 position: absolute;
27                 background-color: #FF0000;
28             }
css代码
技术图片
1 <div class="tian">添加到购物车</div>
2 <div class="car">0</div>
html代码
技术图片
 1 class Pao{
 2             constructor(obj) {
 3                 this.tian = this.$(obj[0])
 4                 this.car = this.$(obj[1])
 5                 this.init()
 6             }
 7             $(k){ //获取元素方法
 8                 return document.querySelector(k)
 9             }
10             init(){
11                 let num = 0
12                 this.tian.onclick = e =>{
13                     let x1 = this.tian.offsetLeft
14                     let y1 = this.tian.offsetTop
15                     let x2 = this.car.offsetLeft
16                     let y2 = this.car.offsetTop
17                     let x3 = this.car.offsetLeft - 600
18                     let y3 = this.car.offsetTop + 100
19                     let a = -((y2-y3)*x1 - (x2-x3)*y1 + x2*y3 - x3*y2) / ((x2-x3) * (x1-x2) * (x1-x3));
20                     let b = ((y2-y3)*x1*x1 + x2*x2*y3 - x3*x3*y2 - (x2*x2 - x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
21                     let c = ((x2*y3 - x3*y2)*x1*x1 - (x2*x2*y3 - x3*x3*y2)*x1 + (x2*x2*x3 - x2*x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
22                     let fly = document.createElement(‘div‘)
23                     fly.className = ‘fly‘
24                     fly.style.left = x1 + ‘px‘
25                     fly.style.top = y1 + ‘px‘
26                     document.body.appendChild(fly)
27                     let left = x1
28                     let top = y1
29                     let tim = setInterval(()=>{
30                         if(left > x2){
31                             num++
32                             clearInterval(tim)
33                             fly.remove()
34                             this.car.innerText = num
35                         }
36                         left+=10
37                         top = a*left*left+b*left+c
38                         fly.style.left = left + ‘px‘
39                         fly.style.top = top + ‘px‘
40                         
41                     },1000/60)
42                 }
43             }
44         }
45         new Pao([‘.tian‘,‘.car‘])
js代码

以上是关于原生js实现点击添加购物车按钮出现飞行物飞向购物车的主要内容,如果未能解决你的问题,请参考以下文章

(实例篇)添加到购物车相关操作

微信小程序结合原生JS实现电商模板

原生JavsScript实现简单购物车面向对象原生代码

js 怎么两个页面联系起来比如加入购物车,点击A页面的加入购物车 在B(购物车)页面显示所添加的商品?

JS实现购物车

原生js实现购物车相关功能