fly插件飞向购物车

最新推荐文章于 2023-03-30 09:51:25 发布

转载最新推荐文章于 2023-03-30 09:51:25 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ssjf/p/10174251.html

文章标签：

#javascript #ViewUI

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

插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp

        <script src="../js/jquery-3.3.1.min.js"></script>
        <script src="../js/jquery.fly.min.js"></script>

<div class="m-sidebar">
        <div class="cart">
            <i id="end"></i>
            <span>购物车</span>
        </div>
    </div>
    <div id="msg">已成功加入购物车！</div>

//购物车飞入
        var $$=jQuery.noConflict();
        //结束位置
        var offset = $$("#end").offset();
        $$(".addcart").on('click', function(event){
            var addcar = $$(this);
            //图片路径
            var img = addcar.parent().parent().find('img').attr('src');
            var flyer = $$('<img class="u-flyer" src="'+img+'">');
            flyer.fly({
                //开始坐标
                start: {
                    left: document.body.scrollLeft+event.clientX,
                    top: document.body.scrollLeft+event.clientY
                },
                //结束坐标
                end: {
                    left: offset.left+10,
                    top: offset.top+10,
                    width: 0,
                    height: 0
                },
                onEnd:function(){
                    $$("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
                    /*addcar.css("cursor","default").removeClass('orange').unbind('click');*/
                    this.destory();
                }
            });
        });