jQuery实现加入购物车飞入动画效果


Posted in Javascript onMarch 14, 2015

jQuery实现加入购物车飞入动画效果

HTML

首先载入jQuery库文件和jquery.fly.min.js插件。

<script src="jquery.js"></script> 

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

接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。

<div class="box"> 

    <img src="images/lg.jpg" width="180" height="180"> 

    <h4>¥<span>3499.00</span></h4> 

    <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div> 

<div class="box"> 

    <img src="images/hs.jpg" width="180" height="180"> 

    <h4>¥<span>3799.00</span></h4> 

    <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div> 

<div class="box"> 

    <img src="images/cw.jpg" width="180" height="180"> 

    <h4>¥<span>¥3999.00</span></h4> 

    <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div> 

<div class="box"> 

    <img src="images/ls.jpg" width="180" height="180"> 

    <h4>¥<span>6969.00</span></h4> 

    <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p> 

    <a href="#" class="button orange addcar">加入购物车</a> 

</div>

然后,我们还需要在页面的右侧加上购物车以及提示信息。

<div class="m-sidebar"> 

    <div class="cart"> 

        <i id="end"></i> 

        <span>购物车</span> 

    </div> 

</div> 

<div id="msg">已成功加入购物车!</div>

CSS
我们使用CSS先将商品排列美化,然后设置右侧购物车样式,具体请看代码:
 

.box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} 

.box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} 

.box:hover{border:1px solid #f90} 

.box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} 

.box h4 span{font-size:20px} 

.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} 

.m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} 

.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;} 

.cart span{display:block;width:20px;margin:0 auto;} 

.cart i{width:35px;height:35px;display:block; background:url(car.png) no-repeat;} 

#msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}

jQuery

我们要实现的效果是,当用户点击“加入购物车”按钮时,当前商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出,最后落入页面右侧的购物车里,并提示操作成功。在飞出之前,我们要获取当前商品的图片,然后调用fly插件,之后的抛物线轨迹都是由fly插件完成,我们只需定义起点和终点等参数即可。

<script> 

$(function() { 

    var offset = $("#end").offset(); 

    $(".addcar").click(function(event){ 

        var addcar = $(this); 

        var img = addcar.parent().find('img').attr('src'); 

        var flyer = $('<img class="u-flyer" src="'+img+'">'); 

        flyer.fly({ 

            start: { 

                left: event.pageX, //开始位置(必填)#fly元素会被设置成position: fixed 

                top: event.pageY //开始位置(必填) 

            }, 

            end: { 

                left: offset.left+10, //结束位置(必填) 

                top: offset.top+10, //结束位置(必填) 

                width: 0, //结束时宽度 

                height: 0 //结束时高度 

            }, 

            onEnd: function(){ //结束回调 

                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 

                addcar.css("cursor","default").removeClass('orange').unbind('click'); 

                this.destory(); //移除dom 

            } 

        }); 

    }); 

}); 

</script>

复制上面的代码,保存并运行即可看到效果,Fly插件的项目官网地址是:https://github.com/amibug/fly,值得一提的是,IE10以下需要添加以下js:

<script src="requestAnimationFrame.js"></script>

以上就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
js+css在交互上的应用
Jul 18 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
复制js对象方法(详解)
Jul 08 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 #Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 #Javascript
You might like
PHP 彩色文字实现代码
2009/06/29 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue仿ios列表左划删除
2019/09/26 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python图形用户接口实例详解
2019/12/16 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
python绘制高斯曲线
2021/02/19 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
大学生职业规划论文
2014/01/11 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
Python中的嵌套循环详情
2022/03/23 Python