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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
AngularJS Controller作用域
Jan 09 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 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中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
总结对比php中的多种序列化
2016/08/28 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python实现学校管理系统
2018/01/11 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2015年派出所工作总结
2015/04/24 职场文书
交心谈心活动总结
2015/05/11 职场文书
新学期开学寄语2016
2015/12/04 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript