JS如何实现高仿抛物线加入购物车特效
这篇文章主要介绍了JS如何实现高仿抛物线加入购物车特效,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联是一家专注于网站设计制作、网站设计与策划设计,江油网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:江油等地区。江油做网站价格咨询:13518219792
1. 简介
要想让你的购物车有种高大上的感觉,加入特效的功能是必不可少的。
2. 实现思路
设置一些简单的样式
模拟把它添加到购物车中,数量增加
从点击的位置开始动画,结束动画
3. 代码实现
CSS代码
咱们给它设置一些简单的样式,让它显得不是那么的太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代码
简单的结构代码,当然,现在写的都很简单!
![](img/1.jpg)![](img/2.jpg) 0
简单样式
JS代码
那么,接下来就要让它动起来了,这里我们首先要引入两个第三方库的插件,然后在写JS代码让它动起来!
接下来就是见证奇迹的时刻了!
$('.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); }
感谢你能够认真阅读完这篇文章,希望小编分享的“JS如何实现高仿抛物线加入购物车特效”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
分享题目:JS如何实现高仿抛物线加入购物车特效
URL链接:http://myzitong.com/article/ipgjii.html