美文网首页
饿了么--小球运动

饿了么--小球运动

作者: ai_cuicui | 来源:发表于2018-03-01 17:13 被阅读0次

最近做了一个项目,添加购物车想要一个小球运动的效果,找了一个抛物插件,简单好用!
用到一个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>

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

相关文章

  • 饿了么--小球运动

    最近做了一个项目,添加购物车想要一个小球运动的效果,找了一个抛物插件,简单好用!用到一个jQuery插件:jque...

  • 仿饿了么小球动画

    饿了么下单时,点击➕会有一个小球跳跃进入购物车的动画,公司有个商城页面要求模仿这个效果,在网上搜了下.都需要借助框...

  • 饿了么,饿了......

    饿了么?多么温情的一句问候,不仅仅是问候,确实也让无数人足不出户就能喂饱肚子,不管你在城市的哪个角落,只要一个电话...

  • 【资源推荐】百大易购/饿了么(天津)/点点运动/饿了么(深圳)/

    ​ 今日推荐资源 发布需求请关注:合肥异业联盟 百大易购/饿了么(天津)/点点运动/饿了么(深圳)/中原地产/新氧...

  • 饿了么? - 草稿

    饿了么?饿,快点饿了么,哈哈,开玩笑呢[奸笑]

  • 饿了么

    2018年 一面 1、粘包如何处理?

  • 饿了么

    2015年10月9日/星期五/天气晴 咕噜咕噜头脑发昏饿了么 日夜辛勤做工只为三餐饱 不必求大富大贵大鱼大肉 只盼...

  • 饿了么

    稀松平常的一句,可以在此之前加个程度副词“最”,偶尔念及,赏心悦目,慰贴得很,“饿了么?”,倘中午十一点左右被人如...

  • 饿了么

    前些天老是待在斗室中,天天被定在座椅上面对电脑点点点,没怎么走路,心向往之,于是写下《走到天荒地老》这般豪情壮志的...

  • 饿了么

    小县城里,天天都能看到“饿了么”几个字,送餐的小哥们,飞跑在大街小巷,成为小县城的一道靓丽风景。他们的辛苦,方便了...

网友评论

      本文标题:饿了么--小球运动

      本文链接:https://www.haomeiwen.com/subject/rmigxftx.html