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

最新推荐文章于 2022-10-08 14:28:19 发布
最新推荐文章于 2022-10-08 14:28:19 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： 框架库点滴知识 文章标签： fly.js

一、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中也就是：

[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. }  

 

弹琴弹琴
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery.fly.min.js
11-01
jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js
基于jquery fly插件实现加入购物车抛物线动画效果
01-19
下面介绍基于jquery fly插件实现加入购物车抛物线动画效果。 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一、插件下载 插件官方:https://github.com/amibug/fly 二、载入jQuery库文件和jquery.fly...
jquery 仿天猫加入购物车
ligaivip的专栏
05-07 957
HTML 首先加载jQuery.js和jquery.fly.min.js插件。  src="jquery.js">    src="jquery.fly.min.js"> 接着，作4个商品进行演示，每个商品中有图片、价格、名称以及加入购物车按钮等信息。  class="demo clearfix">       class="per">        src="images/1.jpg" 
羊了个羊Jquery版
GeRenQuXiang的博客
10-08 306
使用jquery与jquery.fly.js简单实现羊了个羊的点击、移动和消除逻辑。
jQuery
weixin_54005667的博客
01-07 239
jQuery jQuery 是一个 JavaScript 库，它通过封装原生的 JavaScript 函数得到一整套定义好的方法 jQuery的功能和优势 像 CSS 那样访问和操作 DOM 修改 CSS 控制页面外观 简化 JavaScript 代码操作 事件处理更加容易 各种动画效果使用方便 让 Ajax 技术更加完美 基于 jQuery 大量插件 自行扩展功能插件 jQuery的使用 jQuery 下载 http://jquery.com/download/ http://www.jq22.co
利用jquery.fly实现仿淘宝购物车飞入特效
少吃点肉的博客
11-23 8898
学习在于积累，今天利用jquery.fly实现仿淘宝购物车飞入特效，虽然实现起来简单，但实际使用时有一堆坑需要注意。结合实际项目经验，我简单的总结了一下到底有哪些坑需要去填。参考网址：github：https://github.com/amibug/fly从以上网址下载js文件即可使用。一：载入页面 <script src="../lib/jquery/dist/jquery.min.js"
js加入购物车抛物线动画与购物车效果特效
05-23
js加入购物车抛物线动画与购物车效果特效，亲测可用， 当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入...
jQuery仿天猫实现超炫的加入购物车
01-21
本文介绍一款加入购物车插件jquery.fly.min.js,点击加入购物车,物品以抛物线动画效果到达购物车。 演示图： HTML 首先加载jQuery.js和jquery.fly.min.js插件。 [removed][removed] [removed][removed] 接着，作...
jquery插件实现的类似美团app加入购物车效果
09-25
在这个项目中，我们将使用的`jquery.fly.min.js`插件就是基于jQuery的一个扩展，它专门用于创建物体飞行效果，模拟物理运动的轨迹，非常适合用来实现购物车的抛物线动画。 `jquery.fly.min.js`插件的实现原理是利用...
jquery.fly.min.js 拋物插件
weixin_30566111的博客
04-21 82
插件官方:https://github.com/amibug/fly, 官方例子:http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和jquery.fly.min.js插件。 <script src="jquery.js"></script> <script src="jquery.f...
jquery.fly.min.js兼容IE10以下版本插件
12-11
jquery.fly.min.js 运行时，IE10以下版本不兼容，引入这个封装好的API，就能做到完美兼容。
jquery-1.12.2.min.js
03-30
jquery-1.12.2.min.js
jquery.min.js，很好用的基础插件
10-09
jquery.min.js插件，实际运用项目中还是很好用。分享出来大家一起共享，如果大家觉得不错，希望能给个好评。
jQuery标签插件flyLabel.js
07-02
flyLabel.js是一种灵活的浮动标签占位符。flyLabel.js很容易自定义表单标签上的行为。浏览器要求ie9以上版本,演示地址:http://www.jq22.com/jquery-info492
添加商品到购物车动画（fly.js）
qq_27868533的博客
04-11 535
添加商品到购物车动画 1、库文件引入 jquery.fly.min.js是基于jquery的库 <script src="js/libs/angular-ui-router.min.js"></script> <script src="js/libs/jquery.fly.min.js"></script> 2、使用：需要三个目标，目标对象、fly...
HTML 首先加载jQuery.js和jquery.fly.min.js插件。
weixin_33801856的博客
12-16 391
2019独角兽企业重金招聘Python工程师标准>>> ...
基于jquery.i18n.properties 实现前端页面的资源国际化demo
最新发布
01-26
jquery.i18n.properties是一个轻量级的jQuery国际化插件，用于在前端页面实现资源国际化。下面是一个基于jquery.i18n.properties实现前端页面的资源国际化的示例代码： 1. 引入依赖： ```html <script src="jquery.min.js"></script> <script src="jquery.i18n.properties.min.js"></script> ``` 2. 创建资源文件： 在项目的根目录下创建针对每种语言的资源文件，例如 `messages.properties`、`messages_zh.properties`、`messages_en.properties`，分别用于存储不同语言的资源信息。 messages.properties: ``` welcome_title=欢迎使用 welcome_message=你好，世界！ ``` messages_zh.properties: ``` welcome_title=歡迎使用 welcome_message=你好，世界！ ``` messages_en.properties: ``` welcome_title=Welcome welcome_message=Hello, world! ``` 3. 初始化插件： ```javascript $(function() { jQuery.i18n.properties({ name: 'messages', path: 'path/to/resources/', mode: 'both', language: 'zh', callback: function() { // 执行其他需要进行国际化的逻辑 $('#title').text($.i18n.prop('welcome_title')); $('#message').text($.i18n.prop('welcome_message')); } }); }); ``` 通过调用jQuery.i18n.properties来初始化该插件，其中name参数指定了资源文件的前缀名，path参数指定了资源文件的路径，mode参数设置为'both'以支持服务器端和客户端的资源文件加载方式，并通过language参数指定了应加载的语言版本。在回调函数中，可以通过$.i18n.prop方法获取指定资源的国际化文本。 4. 在HTML中使用国际化资源： ```html <h1 id="title"></h1> <p id="message"></p> ``` 以上代码将根据不同的语言版本显示不同的欢迎标题和消息。 通过上述步骤，可以实现前端页面的资源国际化，根据不同的语言版本加载对应的资源文件，并将资源中定义的文本进行国际化显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值