您的位置: 首页  >  文章  >  jquery.fly.js实现添加购物车效果、实现抛物线运动

jquery.fly.js实现添加购物车效果、实现抛物线运动

分类: 文章 • 2023-10-16 21:53:41

一、JQuery.fly.js整理

1.Git源代码地址：

https://github.com/amibug/fly

2.Demo演示地址：http://codepen.io/hzxs1990225/full/ogLaVp

3.Api使用：

[html] view plain copy
  1. <script src="jquery.js"></script>  
  2. <script src="dist/jquery.fly.min.js"></script>  
  3. <script>  
  4. jQuery(function($) {  
  5.   $('#fly').fly({  
  6.     start:{  
  7.       left: 11,  //开始位置（必填）#fly元素会被设置成position: fixed  
  8.       top: 600,  //开始位置（必填）  
  9.     },  
  10.     end:{  
  11.       left: 500, //结束位置（必填）  
  12.       top: 130,  //结束位置（必填）  
  13.       width: 100, //结束时高度  
  14.       height: 100, //结束时高度  
  15.     },  
  16.     autoPlay: false, //是否直接运动,默认true  
  17.     speed: 1.1, //越大越快，默认1.2  
  18.     vertex_Rtop：100, //运动轨迹最高点top值，默认20  
  19.     onEnd: function(){} //结束回调  
  20.   });  
  21.   $('#fly').play(); //autoPlay: false后，手动调用运动  
  22.   $('#fly').destroy(); //移除dom  
  23. });  
  24. </script>  
二、使用实例

1.HTMl页面

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  8.     <title>Document</title>  
  9.     <script src="../js/jquery-1.11.1.min.js"></script>  
  10.     <script src="../js/jquery.fly.min.js"></script>  
  11.     <style>  
  12.         .circle {  
  13.             width: 50px;  
  14.             height: 50px;  
  15.             position: absolute;  
  16.             background: red;  
  17.             border-radius: 50%;  
  18.             top: 25%;  
  19.         }  
  20.           
  21.         .end {  
  22.             width: 50px;  
  23.             height: 50px;  
  24.             position: absolute;  
  25.             background: blue;  
  26.             border-radius: 50%;  
  27.             top: 25%;  
  28.             left: 50%;  
  29.         }  
  30.     </style>  
  31. </head>  
  32.   
  33. <body>  
  34.     <div class="circle"></div>  
  35.     <div class="circle" style="left:10%;"></div>  
  36.     <div class="end"></div>  
  37. </body>  
  38.   
  39. </html>  

2.Js代码

[javascript] view plain copy
  1. var offset = $('.end').offset();  
  2. $('.circle').click(function (event) {  
  3.     var thisItem = $(this);  
  4.     var flyer = thisItem.clone();  
  5.     flyer.fly({  
  6.         start: {  
  7.             left: event.pageX,  
  8.             top: event.pageY  
  9.         },  
  10.         end: {  
  11.             left: offset.left + 10,  
  12.             top: offset.top + 10,  
  13.             width: 0,  
  14.             height: 0  
  15.         },  
  16.         onEnd: function () {  
  17.             $('.end').css({  
  18.                 background: 'red'  
  19.             });  
  20.             setTimeout(function () {  
  21.                 $('.end').css({  
  22.                     background: 'blue'  
  23.                 });  
  24.             }, 200);  
  25.             this.destory();  
  26.         }  
  27.     });  
  28. });  
显示结果：

jquery.fly.js实现添加购物车效果、实现抛物线运动

三、特别说明，运动的图片或效果都是针推当前浏览器可视窗口，

所以在有滚动条的页面，对于运动对象的起始位置、结束位置的高度需要去掉滚动条的高度。

jquery中也就是：

[javascript] view plain copy
  1. $(document).scrollTop()  

[javascript] view plain copy
  1. function flay(thisPanel, targetPanel, callBack) {  
  2.     var thisImg = thisPanel.find('img');  
  3.     var targetImg = targetPanel.find('img');  
  4.     var coin = $('<img  />');  
  5.     coin.addClass('coin');  
  6.     coin.attr('src', '/assets/apps/img/coin_48.png');  
  7.   
  8.     var scrollTop = $(document).scrollTop();  
  9.     coin.fly({  
  10.         start: {  
  11.             left: thisImg.offset().left+thisImg.width()/2,  
  12.             top: thisImg.offset().top-scrollTop,  
  13.         },  
  14.         end: {  
  15.             left: targetImg.offset().left + targetImg.width() / 2,  
  16.             top: targetImg.offset().top - scrollTop,  
  17.             width: 0,  
  18.             height: 0  
  19.         },  
  20.         onEnd: function () {  
  21.             if (callBack) callBack();  
  22.         }  
  23.     });  
  24. }  
jquery.fly.js实现添加购物车效果、实现抛物线运动

相关推荐