JS高仿拋物線加入購(gòu)物車特效實(shí)現(xiàn)代碼
更新時(shí)間：2017年02月20日 15:21:35 作者：Mr_森哥
本篇文章主要介紹了JS高仿拋物線加入購(gòu)物車特效實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
1. 簡(jiǎn)介
要想讓你的購(gòu)物車有種高大上的感覺，加入特效的功能是必不可少的。
2. 實(shí)現(xiàn)思路
- 設(shè)置一些簡(jiǎn)單的樣式
- 模擬把它添加到購(gòu)物車中，數(shù)量增加
- 從點(diǎn)擊的位置開始動(dòng)畫，結(jié)束動(dòng)畫
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)在寫的都很簡(jiǎn)單！
<div class="box">
</div>
<div class="cartBox">
<div class="cart">
<i id="end"></i>
<span>0</span>
</div>
</div>
簡(jiǎn)單樣式
JS代碼
那么，接下來就要讓它動(dòng)起來了，這里我們首先要引入兩個(gè)第三方庫(kù)的插件，然后在寫JS代碼讓它動(dòng)起來！
<script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.fly.min.js"></script>
接下來就是見證奇跡的時(shí)刻了！
$('.box').on('click', addCart);
var num = 0;
function addCart(event) {
var offset = $('#end').offset(), flyer = $('');
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);
}
最終效果
是不是很簡(jiǎn)單，有沒有學(xué)會(huì)??！
4. 結(jié)束語(yǔ)
以上就是全部?jī)?nèi)容了，希望我寫東西對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望讀者繼續(xù)支持腳本之家。
相關(guān)文章
JavaScript禁用右鍵單擊優(yōu)缺點(diǎn)分析
在本篇文章里小編給大家分享了關(guān)于JavaScript禁用右鍵單擊優(yōu)缺點(diǎn)分析，有需要的朋友們學(xué)習(xí)下。2019-01-01
JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
簡(jiǎn)單獲取鍵盤的KeyCode...2006-09-09
本文主要介紹了手把手教會(huì)你使用redux的入門教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11
詳解SPA中前端路由基本原理與實(shí)現(xiàn)方式
這篇文章主要介紹了詳解SPA中前端路由基本原理與實(shí)現(xiàn)方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果
這篇文章主要介紹了JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果,涉及JavaScript操作cookie及導(dǎo)航樣式布局的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
axios處理重復(fù)請(qǐng)求的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了如何使用發(fā)布訂閱者模式來處理重復(fù)的axios請(qǐng)求,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件，附加導(dǎo)航即粘貼在屏幕某處實(shí)現(xiàn)錨點(diǎn)功能，感興趣的小伙伴們可以參考一下2016-04-04