饿了么--小球运动

2018-03-01  本文已影响0人  ai_cuicui

最近做了一个项目,添加购物车想要一个小球运动的效果,找了一个抛物插件,简单好用!
用到一个jQuery插件:jquery.fly.min.js
可以在网上下载一个哦!

<!--运动开始的地方-->
<img class="add" src="img/addCar.png" alt="">
<!--运动结束的地方-->
<div>
            <i id="footer_end"></i>
            <img src="img/car.png" alt="">
            <p>购物车</p><span>1</span>
</div>

<script src="js/jquery.fly.min.js"></script>
<script>
 //添加到购物车效果
    //给添加按钮添加点击事件,执行addCart函数
    $('.add').on('click', addCart);

    function addCart(event) {
        //设定一个计时器,指定运动时间
        var timer = setTimeout(setTime,500);
        //找到i标签的位置,创建一个运动式的标签flyer
        var offset = $('#footer_end').offset(), flyer = $('<p style="width: 0.4rem;height: 0.4rem; border-radius: 50%;background-color: #00D0E8"></p>');
        flyer.fly({
            start: {
                left: event.pageX,
                top: event.pageY
            },
            end: {
                left: offset.left-17,      //指定落下时距离左边的位置,值可以改变
                top: offset.top-5,        //指定落下时距离上边的位置,值可以改变
                width: 0,
                height: 0
            }
        });
    }

</script>

大功告成!不喜勿喷!谢谢!

上一篇 下一篇

猜你喜欢

热点阅读