利用jquery.fly实现仿淘宝购物车飞入特效

最新推荐文章于 2019-11-17 11:43:15 发布

zheng_lan_fang

最新推荐文章于 2019-11-17 11:43:15 发布

阅读量1.4k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

利用jquery.fly实现仿淘宝购物车飞入特效

标签：淘宝网 javascript jquery-fly 购物车飞入特效

分类：

常用插件（3）

作者同类文章 X

学习在于积累，今天利用jquery.fly实现仿淘宝购物车飞入特效，虽然实现起来简单，但实际使用时有一堆坑需要注意。结合实际项目经验，我简单的总结了一下到底有哪些坑需要去填。

参考网址：github：https://github.com/amibug/fly

从以上网址下载js文件即可使用。

一：载入页面

  <script src="../lib/jquery/dist/jquery.min.js"></script>
  <script src="../lib/fly-master/dist/jquery.fly.min.js"></script>
  <script src="../lib/fly-master/src/requestAnimationFrame.js"></script>

tips：requestAnimationFrame.js文件是用来兼容IE8以下的游览器的

二：实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝购物车飞入特效</title>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/fly-master/dist/jquery.fly.min.js"></script>
    <script src="../lib/fly-master/src/requestAnimationFrame.js"></script>
    <style>
        .box{
            width: 198px;
            height: 320px;
            border: 1px solid #e0e0e0;
            text-align: center;
        }
        .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500}
        .box h4 span{font-size:20px}
        .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
        .m-sidebar{
            position: fixed;
            top:0;
            right: 0;
            background: #000000;
            z-index: 2000;
            width: 35px;
            height: 100%;
            font-size: 12px;
            color: #fff;
        }
        .cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;margin: 200px 0}
        .cart span{display:block;width:20px;margin:0 auto;}
    </style>
</head>
<body>
<div class="box">
    <img src="../logo.jpg" width="180" height="180">
    <h4>￥<span>300</span></h4>
    <a href="#" class="button orange addcar">加入购物车</a>
</div>

<div class="m-sidebar">
    <div class="cart">
        <i id="end"></i>
        <span>购物车</span>
    </div>
</div>

<script>
    $(function () {
        var offset=$('#end').offset();

        $(window).resize(site);
        function site() {
            offset=$('#end').offset();
        }
            $('.box').on('click','a',function () {
                var addcar=$(this);
                var img=addcar.parent().find('img').attr('src');
                var flyer=$('<img class="u-flyer" src="'+img+'">');
                console.log(offset)
                flyer.fly({
                    start:{
                        left:event.pageX,
                        top:event.pageY
                    },
                    end:{
                        left:offset.left,
                        top:offset.top,
                        width:0,
                        height:0
                    }

                })
            })
    })
</script>
</body>
</html>

效果图展示：

这里写图片描述

这个是简单的实现，实际项目的实现就不发出来了，为了节省各位看官的时间，我还是先把遇到的坑给总结出来吧。

天坑一：页面大小变化，飞入位置错误

问题原因：代码只获取了一次offset，所以页面发生改变后，虽然offset也发生了改变，但是程序中的offset还是以前的值。

解决方法：我们在页面改变是触发的resize()事件中，重新获取offset属性即可，具体代码：

$(window).resize(site);
 function site() {
     offset=$('#end').offset();
}

天坑二：代码写的没问题，但是结束位置的offset错误，而且总是偏大

问题原因： offset在获取初始值时，会受到滚动条的影响，当有上下滚动条或者左右滚动条时，offset的位置就会相应的偏大。

解决方法： 让页面的scoll值为0，并且每次改变页面也归置为0，具体代码：

$(window).scrollTop(0);
$(window).resize(site);
 function site() {
    $(window).scrollTop(0);
    offset=$('#end').offset();

}

天坑三：offset没问题了，但是起飞时又有问题，起飞的位置也偏大

问题原因： 依然是受到scoll的影响，所以我们实际的起飞位置应该是page的值减去scoll的值

解决方法： 起飞位置=page的值 - scoll的值，具体代码：

var scrollTop;
$(window).scroll(function() { 
    scrollTop=$(window).scrollTop(); 
});

start: {
            left: event.pageX,
            top: event.pageY-scrollTop
            }

以上问题都解决完以后，基本就能做出比较完美的飞入特效了。