JS高仿拋物線(xiàn)加入購(gòu)物車(chē)特效實(shí)現(xiàn)代碼

2019-11-19 17:29:21

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

1. 簡(jiǎn)介

要想讓你的購(gòu)物車(chē)有種高大上的感覺(jué)，加入特效的功能是必不可少的。

2. 實(shí)現(xiàn)思路

設(shè)置一些簡(jiǎn)單的樣式
模擬把它添加到購(gòu)物車(chē)中，數(shù)量增加
從點(diǎn)擊的位置開(kāi)始動(dòng)畫(huà)，結(jié)束動(dòng)畫(huà)

3. 代碼實(shí)現(xiàn)

CSS代碼

咱們給它設(shè)置一些簡(jiǎn)單的樣式，讓它顯得不是那么的太low

.flyer {      display: block;      width: 50px;      height: 50px;      border-radius: 50px;      position: fixed;      margin-left: 50px;      z-index: 9999;    }    .cart img{      width: 60px;      height: 60px;      padding: 5px 0 0 250px;    }    .cartBox span{      display: block;      color: white;      position: absolute;      left: 282px;      top: 226px;      width: 25px;      height: 25px;      border-radius: 50%;      text-align: center;      line-height: 25px;      background-color: red;    }

HTML代碼

簡(jiǎn)單的結(jié)構(gòu)代碼，當(dāng)然，現(xiàn)在寫(xiě)的都很簡(jiǎn)單！

<div class="box">     ![](img/1.jpg)  </div>  <div class="cartBox">    <div class="cart">      <i id="end"></i>        ![](img/2.jpg)        <span>0</span>    </div>  </div>

簡(jiǎn)單樣式

JS代碼

那么，接下來(lái)就要讓它動(dòng)起來(lái)了，這里我們首先要引入兩個(gè)第三方庫(kù)的插件，然后在寫(xiě)JS代碼讓它動(dòng)起來(lái)！

<script src="js/jquery-3.0.0.min.js"></script><script src="js/jquery.fly.min.js"></script>

接下來(lái)就是見(jiàn)證奇跡的時(shí)刻了！

$('.box').on('click', addCart);    var num = 0;    function addCart(event) {      var offset = $('#end').offset(), flyer = $('![](img/1.jpg)');      flyer.fly({        start: {          left: event.pageX,          top: event.pageY        },        end: {          left: offset.left + 280,          top: offset.top,          width: 0,          height: 0        }      });      num++;        $('.cartBox span').text(num);    }

最終效果