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代码
简单的结构代码,当然,现在写的都很简单!
<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>
简单样式
JS代码
那么,接下来就要让它动起来了,这里我们首先要引入两个第三方库的插件,然后在写JS代码让它动起来!
<script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.fly.min.js"></script>
接下来就是见证奇迹的时刻了!
$('.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); }
最终效果
是不是很简单,有没有学会啊!
4. 结束语
以上就是全部内容了,希望我写东西对大家的学习或者工作能带来一定的帮助,同时也希望读者继续支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。