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

深碍√TFBOYSˉ_ 2022-09-29 12:57 219阅读 0赞

一、JQuery.fly.js整理

1.Git源代码地址：

[https://github.com/amibug/fly][https_github.com_amibug_fly]

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

3.Api使用：

<script src="jquery.js"></script>
    <script src="dist/jquery.fly.min.js"></script>
    <script>
    jQuery(function($) {
      $('#fly').fly({
        start:{
          left: 11,  //开始位置（必填）#fly元素会被设置成position: fixed
          top: 600,  //开始位置（必填）
        },
        end:{
          left: 500, //结束位置（必填）
          top: 130,  //结束位置（必填）
          width: 100, //结束时高度
          height: 100, //结束时高度
        },
        autoPlay: false, //是否直接运动,默认true
        speed: 1.1, //越大越快，默认1.2
        vertex_Rtop：100, //运动轨迹最高点top值，默认20
        onEnd: function(){} //结束回调
      });
      $('#fly').play(); //autoPlay: false后，手动调用运动
      $('#fly').destroy(); //移除dom
    });
    </script>

二、使用实例

1.HTMl页面

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../js/jquery-1.11.1.min.js"></script>
        <script src="../js/jquery.fly.min.js"></script>
        <style>
            .circle {
                width: 50px;
                height: 50px;
                position: absolute;
                background: red;
                border-radius: 50%;
                top: 25%;
            }
            
            .end {
                width: 50px;
                height: 50px;
                position: absolute;
                background: blue;
                border-radius: 50%;
                top: 25%;
                left: 50%;
            }
        </style>
    </head>
    
    <body>
        <div class="circle"></div>
        <div class="circle" style="left:10%;"></div>
        <div class="end"></div>
    </body>
    
    </html>

2.Js代码

var offset = $('.end').offset();
    $('.circle').click(function (event) {
        var thisItem = $(this);
        var flyer = thisItem.clone();
        flyer.fly({
            start: {
                left: event.pageX,
                top: event.pageY
            },
            end: {
                left: offset.left + 10,
                top: offset.top + 10,
                width: 0,
                height: 0
            },
            onEnd: function () {
                $('.end').css({
                    background: 'red'
                });
                setTimeout(function () {
                    $('.end').css({
                        background: 'blue'
                    });
                }, 200);
                this.destory();
            }
        });
    });

显示结果：

![Center][]

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

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

jquery中也就是：

$(document).scrollTop()

function flay(thisPanel, targetPanel, callBack) {
        var thisImg = thisPanel.find('img');
        var targetImg = targetPanel.find('img');
        var coin = $('<img  />');
        coin.addClass('coin');
        coin.attr('src', '/assets/apps/img/coin_48.png');
    
        var scrollTop = $(document).scrollTop();
        coin.fly({
            start: {
                left: thisImg.offset().left+thisImg.width()/2,
                top: thisImg.offset().top-scrollTop,
            },
            end: {
                left: targetImg.offset().left + targetImg.width() / 2,
                top: targetImg.offset().top - scrollTop,
                width: 0,
                height: 0
            },
            onEnd: function () {
                if (callBack) callBack();
            }
        });
    }

更多：

[RequireJS实例][RequireJS]

[Bootstrap3 datetimepicker控件的使用][Bootstrap3 datetimepicker]

[jquery.qrcode.js生成二维码插件&转成图片格式][jquery.qrcode.js]

[https_github.com_amibug_fly]: https://github.com/amibug/fly
[http_codepen.io_hzxs1990225_full_ogLaVp]: http://codepen.io/hzxs1990225/full/ogLaVp
[Center]: /images/20220708/1057523cdeb1437bb20f94c62de0831a.png
[RequireJS]: http://blog.csdn.net/u011127019/article/details/53503275
[Bootstrap3 datetimepicker]: http://blog.csdn.net/u011127019/article/details/51725081
[jquery.qrcode.js]: http://blog.csdn.net/u011127019/article/details/51226104

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

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

一、JQuery.fly.js整理 1.Git源代码地址： [https://github.com/amibug/fly][https_github.com_amibug_

深碍√TFBOYSˉ_/ 2022年09月29日 12:57/ 0 赞/ 220 阅读

相关 JavaScript实现的抛物线运动效果

原文：[http://www.css88.com/archives/5355][http_www.css88.com_archives_5355] 作者的主要实现代码：

ゝ一世哀愁。/ 2022年08月06日 14:07/ 0 赞/ 215 阅读

相关购物抛物线

天猫购物车抛物线真实项目经验购物车抛物线，首先引入js:jquery-1.8.3.min.js、fly.js、requestAnimationFrame.js（用户

女爷i/ 2022年07月27日 13:58/ 0 赞/ 163 阅读

相关购物车实现逻辑

先谈一下购物车的演变：早期的购物车默认全选功能然后进行提交订单，但是狠多用户将购物车当成了收藏夹，只是收藏而不购买，如果每次都是全选的话，用户需要将收藏的商

绝地灬酷狼/ 2022年07月14日 04:59/ 0 赞/ 297 阅读

相关抛物线运动JavaScript实现

html代码 <div id="goods"></div> css代码 { margin: 0;

柔光的暖阳◎/ 2022年05月27日 12:29/ 0 赞/ 248 阅读

相关 JavaScript实现购物车

![70][] ![70 1][] <!DOCTYPE html> <html lang="en"> <head> <meta charse

男娘i/ 2022年05月19日 00:22/ 0 赞/ 365 阅读

相关 js实现购物车的抛物线

我们经常在电商网站上买东西，当我们将心仪的商品加入购物车时，可能碰到下面的画面。 ![这里写图片描述][70] 注意小球的运动，请自主忽略画技；小球的运动轨迹呈现

布满荆棘的人生/ 2022年05月15日 01:05/ 0 赞/ 267 阅读

相关购物车实现

[https://note.youdao.com/share/?id=fdc2f7f71349a5c38434d2802faa6552&type=note\/][https_n

绝地灬酷狼/ 2022年05月08日 06:38/ 0 赞/ 407 阅读

相关 JS实现购物车的添加动画效果

//这块获取的购物车的位置 \cartN这个是购物车的id var offset = $('cartN').offset(); //这块是店家添加的时候的时候的操作

灰太狼/ 2022年04月22日 04:18/ 0 赞/ 640 阅读

相关 vue 实现购物车

![在这里插入图片描述][20181216124512128.png] <template> <div> <div class="shop

一时失言乱红尘/ 2022年04月04日 09:47/ 0 赞/ 406 阅读