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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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 验证码的实现代码
2011/07/17 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
django中的ajax组件教程详解
2018/10/18 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Django用户身份验证完成示例代码
2020/04/03 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
总经理任命书
2014/03/29 职场文书
公司感谢信范文
2015/01/22 职场文书
思想道德自我评价2015
2015/03/09 职场文书
确保工程质量承诺书
2015/04/29 职场文书
企业法人代表证明书
2015/06/18 职场文书
2015年科普工作总结
2015/07/23 职场文书
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript