在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高。下面介绍基于jquery fly插件实现加入购物车抛物线动画效果。使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能

一、插件下载

插件官方:https://github.com/amibug/fly

二、载入jQuery库文件和jquery.fly.min.js插件

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

三、加入购物车动画飞入效果实例

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

<div class="container">
<div class="demo clearfix">
<div class="per">
<img src="data:images/1.jpg" width="180" height="240" alt="图片二"/>
<div class="title">aaa</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
<div class="per">
<img src="data:images/2.jpg" width="180" height="240" alt="图片二"/>
<div class="title">bbb</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</div>
</div>
<div class="cart-sidebar">
<div class="cart">
<i id="icon-cart"></i>
<span>购物车</span>
</div>
</div>
<div id="tip">成功加入购物车!</div>
<script>
$(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(); //销毁抛物体
}
});
});
});
<script>

  

$(window).resize(function() {
$('a[nctype="add_cart"]').click(function() {
flyToCart($(this));
});
});
function flyToCart($this) {
var rtoolbar_offset_left = $("#rtoolbar_cart").offset().left;
var rtoolbar_offset_top = $("#rtoolbar_cart").offset().top-$(document).scrollTop();
var img = $this.parents('.browse-goods:first').find('img:first').attr('src');
var data_gid = $this.attr('data-gid');
var flyer = $('<img class="u-flyer" src="'+img+'" style="z-index:999">');
flyer.fly({
start: {
left: $this.offset().left-450,
top: $this.offset().top-$(document).scrollTop()
},
end: {
left: rtoolbar_offset_left,
top: rtoolbar_offset_top,
width: 0,
height: 0
},
onEnd: function(){
addcart(data_gid,1,'');
flyer.remove();
}
});
}

基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js的更多相关文章

  1. jQuery.fly插件实现添加购物车抛物线效果

    样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  4. js加入购物车抛物线动画

    天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着 ...

  5. jQuery 特效:盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  6. jQuer插件满屏气泡飘落动画效果

    飘落动画效果插件引用: <script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.j ...

  7. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  8. fly插件飞向购物车

    首先载入jQuery库文件和jquery.fly.min.js插件. 插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs ...

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

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

随机推荐

  1. MySQL 笔记2

    -- *************一.数据约束********************---- -- 1.1 默认值 CREATE TABLE student( id INT, NAME ), addr ...

  2. IE6\7\8下placeholder效果,支持文本框和密码框

    (function($) {  var placeholderfriend = {    focus: function(s) {      s = $(s).hide().prev().show() ...

  3. 通过xshell远程连接ubuntu

    ubuntu开启sshd服务SSH分客户端openssh-client和openssh-server如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果 ...

  4. js 检测页面刷新或关闭

    window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }

  5. EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题

    症状如图: 上图中,行号列与checkbox 列融合了.解决方法是在datagrid 的 onLoadSuccess 事件中加入如下代码: var opts = $(this).datagrid('o ...

  6. Office2013插件开发Outlook篇(1)-- 第一个office2013插件

    一.环境: 下载VS2013安装,记得安装office插件开发包哦. 二.新建Outlook插件项目

  7. 【跟着子迟品 underscore】Array Functions 相关源码拾遗 & 小结

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  8. IT职场人的“存在主义”

      人生在世,最重要的一条就是:找准你的位置.也就是,你的定位问题. 就在前两天,参加一次社交活动,一知名培训师回顾过往,感慨地说:一个好的培训师,一定要定位好自己的客户群,根据他们的需求做好自己的定 ...

  9. jquey on

    1.如果你的元素是用clone方法复制出来的,并且,用了on来绑定事件的话,必须在clone的后边添加true,负责你的事件不会生效. 2.必须在on $('.js-liubody').on('cli ...

  10. os 模块

    __file__获取当前模块所在路径 一.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的. 二.常用方法 1.os.name 输 ...