zoukankan      html  css  js  c++  java
  • 原生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代码
  • 相关阅读:
    设计模式--单例模式(Singleton)
    C# 和.Net 特性
    Fiddler 教程
    史铁生遗作:昼信基督夜信佛
    如何实现早日退休理想
    Linux 常用
    Golang 读书
    Python 读书
    RbMQ 简介
    UML 简介
  • 原文地址:https://www.cnblogs.com/zlf1914/p/13045469.html
Copyright © 2011-2022 走看看