jQuery仿天猫实现超炫的加入购物车


Posted in Javascript onMay 04, 2015

超炫加入购物车效果,和天猫、聚美优品加入购物车效果相媲美。本文介绍一款加入购物车插件jquery.fly.min.js,点击加入购物车,物品以抛物线动画效果到达购物车。

演示图:

jQuery仿天猫实现超炫的加入购物车

HTML

首先加载jQuery.js和jquery.fly.min.js插件。

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

接着,作4个商品进行演示,每个商品中有图片、价格、名称以及加入购物车按钮等信息。

<div class="demo clearfix"> 
  <div class="per"> 
  <img src="images/1.jpg" width="180" height="240" alt="图片二" /> 
  <h3>¥<span>259.00</span></h3> 
  <div class="title">春款真皮坡跟大码单鞋内增高女士鞋子</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/2.jpg" width="180" height="240" alt="图片二" /> 
  <h3>¥<span>136.00</span></h3> 
  <div class="title">韩国代购情侣棉衣棉服女款韩版羊羔毛大衣</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/3.jpg" width="180" height="240" alt="图片三" /> 
  <h3>¥<span>¥728.00</span></h3> 
  <div class="title">冬季运动情侣羽绒棉马甲男士薄马甲</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/4.jpg" width="180" height="240" alt="图片四" /> 
  <h3>¥<span>119.00</span></h3> 
  <div class="title">原创-城市简约文艺纯色棉麻新中式小立领</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
</div>

jQuery

我们要实现的效果是:当点击“加入购物车”按钮后,商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出到右侧的购物车里。在飞出之前,我们要获取当前商品的图片,然后调用fly插件,之后的抛物线轨迹都是由fly插件完成,我们只需定义起点和终点左边以及结束后销毁之前的动画。

$(function() { 
  var offset = $("#icon-cart").offset(); 
  $(".addcart").click(function(event) { 
    var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接 
    var flyer = $('<img class="flyer-img" src="' + img + '">'); //抛物体对象 
    flyer.fly({ 
      start: { 
        left: event.pageX,//抛物体起点横坐标 
        top: event.pageY //抛物体起点纵坐标 
      }, 
      end: { 
        left: offset.left + 10,//抛物体终点横坐标 
        top: offset.top + 10, //抛物体终点纵坐标 
      }, 
      onEnd: function() { 
        $("#tip").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果 
        this.destory(); //销毁抛物体 
      } 
    }); 
  }); 
});

以上代码即可完成加入购物车效果,是不是很棒啊!Fly插件官网:https://github.com/amibug/fly,另外兼容IE10以下需要添加以下js文件:

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

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

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
jquery 插件 人性化的消息显示
Jan 21 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
JavaScript中操作字符串小结
May 04 #Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 #Javascript
javascript多行字符串的简单实现方式
May 04 #Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 #Javascript
js实现兼容IE和FF的上下层的移动
May 04 #Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 #Javascript
jQuery实现的向下图文信息滚动效果
May 03 #Javascript
You might like
也谈php网站在线人数统计
2008/04/09 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
拖动一个HTML元素
2006/12/22 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
js在HTML的三种引用方式详解
2020/08/29 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
实例代码讲解Python 线程池
2020/08/24 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
导游实习生自荐书
2014/01/28 职场文书
2015年库房工作总结
2015/04/30 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
python绘制云雨图raincloud plot
2022/08/05 Python