jQuery实现商品飞入购物车效果插件

jQuery实现商品飞入购物车效果插件
 点击预览  点击下载

当您在电商购物网站浏览中意的商品时(类似的有天猫等),您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入购物车按钮时,实现商品将飞入到右侧的购物车中的效果。

HTML

首先载入jQuery库文件和jquery.fly.min.js插件。

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

接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。

  1. <div class="box">  
  2.     <img src="images/lg.jpg" width="180" height="180">  
  3.     <h4><span>3499.00</span></h4>  
  4.     <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>  
  5.     <a href="#" class="button orange addcar">加入购物车</a>  
  6. </div>  
  7. <div class="box">  
  8.     <img src="images/hs.jpg" width="180" height="180">  
  9.     <h4><span>3799.00</span></h4>  
  10.     <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p>  
  11.     <a href="#" class="button orange addcar">加入购物车</a>  
  12. </div>  
  13. <div class="box">  
  14.     <img src="images/cw.jpg" width="180" height="180">  
  15.     <h4><span>¥3999.00</span></h4>  
  16.     <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>  
  17.     <a href="#" class="button orange addcar">加入购物车</a>  
  18. </div>  
  19. <div class="box">  
  20.     <img src="images/ls.jpg" width="180" height="180">  
  21.     <h4><span>6969.00</span></h4>  
  22.     <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>  
  23.     <a href="#" class="button orange addcar">加入购物车</a>  
  24. </div>  

然后,我们还需要在页面的右侧加上购物车以及提示信息。

  1. <div class="m-sidebar">  
  2.     <div class="cart">  
  3.         <i id="end"></i>  
  4.         <span>购物车</span>  
  5.     </div>  
  6. </div>  
  7. <div id="msg">已成功加入购物车!</div>  

CSS

我们使用CSS先将商品排列美化,然后设置右侧购物车样式,具体请看代码:

  1. .box{float:leftwidth:198pxheight:320pxmargin-left:5pxborder:1px solid #e0e0e0text-align:center}  
  2. .box p{line-height:20pxpadding:4px 4px 10px 4pxtext-align:left}  
  3. .box:hover{border:1px solid #f90}  
  4. .box h4{line-height:32pxfont-size:14pxcolor:#f30;font-weight:500}  
  5. .box h4 span{font-size:20px}  
  6. .u-flyer{displayblock;width50px;height50px;border-radius: 50px;positionfixed;z-index9999;}  
  7.   
  8. .m-sidebar{positionfixed;top: 0;right: 0;background#000;z-index2000;width35px;height100%;font-size12px;color#fff;}  
  9. .cart{color#fff;text-align:center;line-height20px;padding200px 0 0 0px;}  
  10. .cart span{display:block;width:20px;margin:0 auto;}  
  11. .cart i{width:35px;height:35px;display:blockbackground:url(car.png) no-repeat;}  
  12. #msg{position:fixed; top:300px; right:35pxz-index:10000width:1pxheight:52pxline-height:52pxfont-size:20pxtext-align:centercolor:#fffbackground:#360display:none}  

jQuery

我们要实现的效果是,当用户点击“加入购物车”按钮时,当前商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出,最后落入页面右侧的购物车里,并提示操作成功。在飞出之前,我们要获取当前商品的图片,然后调用fly插件,之后的抛物线轨迹都是由fly插件完成,我们只需定义起点和终点等参数即可。

  1. <script>  
  2. $(function() {  
  3.     var offset = $("#end").offset();  
  4.     $(".addcar").click(function(event){  
  5.         var addcar = $(this);  
  6.         var img = addcar.parent().find('img').attr('src');  
  7.         var flyer = $('<img class="u-flyer" src="'+img+'">');  
  8.         flyer.fly({  
  9.             start: {  
  10.                 left: event.pageX, //开始位置(必填)#fly元素会被设置成position: fixed  
  11.                 top: event.pageY //开始位置(必填)  
  12.             },  
  13.             end: {  
  14.                 left: offset.left+10, //结束位置(必填)  
  15.                 top: offset.top+10, //结束位置(必填)  
  16.                 width: 0, //结束时宽度  
  17.                 height: 0 //结束时高度  
  18.             },  
  19.             onEnd: function(){ //结束回调  
  20.                 $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息  
  21.                 addcar.css("cursor","default").removeClass('orange').unbind('click');  
  22.                 this.destory(); //移除dom  
  23.             }  
  24.         });  
  25.     });  
  26. });  
  27. </script>  

复制上面的代码,保存并运行即可看到效果,Fly插件的项目官网地址是:https://github.com/amibug/fly,值得一提的是,IE10以下需要添加以下js:

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

转载请注明:代码家园 » jQuery实现商品飞入购物车效果插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)