web前端fly插件实现投入购物车抛物线动画效果,jQuery仿Tmall达成超炫的参与购物车

By admin in web前端 on 2019年8月27日

据他们说jquery fly插件落成投入购物车抛物线动画效果,jquery购物车

先给我们体现下效果图:

web前端 1

在购物网址中,参与购物车的法力是必需的法力,有的网址在顾客点击参与购物车按键时,就可以冒出该商品从点击出以抛物线的动画一般出席购物车,那个效果看起来非常炫,对顾客体验也许有自然的加强。上边介绍基于jquery
fly插件达成投入购物车抛物线动画效果。

动用jquery.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="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="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>
购物车
</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="'%20+%20img%20+%20'">'); //抛物体对象 
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>

备注

IE10以下须求增加以下js:

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

以上所述是针对jquery
fly插件达成投入购物车抛物线动画效果,希望对大家具备扶助!

超炫到场购物车功能,和天猫百货店、聚美优质产品到场购物车功效相比美。本文介绍一款投入购物车插件jquery.fly.min.js,点击参加购物车,货物以抛物线动画效果达到购物车。

先给我们体现下效果图:

您或者感兴趣的篇章:

  • Jquery 飞快营造可牵引的购物车DragDrop
  • 听新闻说JQuery实现的接近购物商场的购物车
  • jQuery完毕类似天猫购物车全选状态示例
  • jquery购物车实时买下账单特效达成思路
  • jQuery达成购物车多货品数量的加减+总价总结
  • JQuery完成的购物车功效(能够减掉大概加多商品并自动计算价格)
  • jQuery实现投入购物车飞入动画效果
  • jQuery完成购物车数字加减效果
  • jQuery完结购物车总括价格职能的法子

fly插件完成投入购物车抛物线动画效果,jquery购物车 先给我们来得下效果图:
在购物网址中,插足购物车的效果是必需的效果,…

演示图:

web前端 2

web前端 3

在购物网址中,出席购物车的机能是必得的机能,有的网址在客户点击参与购物车开关时,就能产出该商品从点击出以抛物线的卡通一般参加购物车,那些效应看起来分外炫,对客商体验也会有确定的滋长。上面介绍基于jquery
fly插件完结投入购物车抛物线动画效果。

HTML

使用jquery.fly插件很平价时落到实处抛物线动画参加购物车的效果

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

一、插件下载

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

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

随后,作4个商品实行自己要作为楷模服从规则,各样商品中有图表、价格、名称以及参与购物车按键等音信。

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

<div class="demo clearfix"> 
  <div class="per"> 
  <img src="images/1.jpg" width="180" height="240" alt="图片二" /> 
  <h3>¥259.00</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>¥136.00</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>¥¥728.00</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>¥119.00</h3> 
  <div class="title">原创-城市简约文艺纯色棉麻新中式小立领</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
</div>
<script src="jquery.js"></script> 
<script src="jquery.fly.min.js"></script>

jQuery

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

我们要促成的法力是:当点击“到场购物车”按键后,商品图片会成为一个收缩的球体,以开关为源点,向右边以抛物线的花样飞出到左臂的购物车上。在飞出此前,咱们要取妥善前货品的图片,然后调用fly插件,之后的抛物线轨迹都是由fly插件达成,我们只需定义源点和顶峰左边以及甘休后销毁在此之前的卡通。

咱俩要贯彻的效应是:当点击“插手购物车”按键后,商品图片会化为三个紧缩的圆球,以按键为源点,向侧面以抛物线的样式飞出到右边手的购物车上。在飞出以前,大家要赢稳当前货色的图形,然后调用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="'%20+%20img%20+%20'">'); //抛物体对象 
    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(); //销毁抛物体 
      } 
    }); 
  }); 
});
<div class="container">
<div class="demo clearfix">
<div class="per">
<img src="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="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>
购物车
</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="'%20+%20img%20+%20'">'); //抛物体对象 
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>

上述代码就可以到位步向购物车功用,是还是不是很棒啊!Fly插件官方网站:,别的包容IE10以下须要加多以下js文件:

备注

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

IE10以下供给增加以下js:

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

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

你或然感兴趣的小说:

  • jQuery实现购物车多货色数量的加减+总价总括
  • jQuery完结投入购物车飞入动画效果
  • 基于JQuery完结的类似购物超市的购物车
  • JQuery达成的购物车成效(能够削减恐怕加上商品并活动测算价格)
  • 纯jquery完成模仿天猫商城购物车买单
  • jQuery达成购物车总计价格职能的不二等秘书诀
  • jQuery达成购物车数字加减效果
  • jQuery达成类似Taobao购物车全选状态示例
  • jQuery+HTML5加盟购物车代码共享
  • 运用jQuery实现购物车付钱功效

如上所述是指向jquery
fly插件达成投入购物车抛物线动画效果,希望对大家持有支持!

您大概感兴趣的稿子:

  • jQuery完结的背景颜色渐变动画功用示例
  • 详解jQuery中着力的卡通方法
  • jQuery之动画作用大全
  • jQuery Ajax
    加载数据时异步突显加载动画
  • 原生js仿jquery
    animate动画效果
  • jQuery落成图像旋转动画效果
  • jQuery中运用animate自定义动画的不二法门
  • 深深明白jquery自定义动画animate()
  • jQuery达成点击水纹波动动画
  • 运用jquery制作滚动到钦点地点触发动画
  • jQuery动画效果图片轮播特效
  • jQuery动画_重力节点节点Java高校整理

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有