js加入购物车动画

最新推荐文章于 2024-05-21 11:37:12 发布

717606641

最新推荐文章于 2024-05-21 11:37:12 发布

阅读量3.2k

点赞数 1

分类专栏： js 文章标签： js 购物车动画

本文链接：https://blog.csdn.net/u010655942/article/details/48326519

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近项目需要一个添加购物车动画，然后自己研究了一下

先上效果图

商品静静躺在那里

点击购物车，开始播放动画

最终，商品图片落入购物车

商品图片落入购物车后，有一个回调函数可以在动画播放完毕执行真正的加入购物车操作，比如在购物车加上一个数字什么的

以下是全部代码

<!doctype html>
<html>
<head>
    <title>购物车动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="jquery.js"></script>
    <script src="jquery.easing.1.3.min.js"></script>
</head>
<body>
    <img class="googsimg" src="1.jpg" />
    <br />
    <div><button>加入购物车</button></div>
    <div class="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <style type="text/css">
        body { margin: 0; }
        .googsimg { width: 200px; height: auto; }
        .nav { width: 100%; height: 50px; position: fixed; bottom: 0; }
        ul { margin: 0; padding: 0; }
        li { margin: 0; padding: 0; list-style: none; float: left; width: 25%; text-align: center; line-height: 50px; height: 50px; border: solid 1px black; box-sizing: border-box; }
    </style>
    <script>
        function AddToCart(fromEl, toEl, callback)
        {
            var fromX = fromEl.offset().left
            var fromY = fromEl.offset().top - $(document).scrollTop()
            var toX = toEl.offset().left
            var toY = toEl.offset().top - $(document).scrollTop()
            var img = document.createElement('img')
            img.src = fromEl.attr('src')
            img.style.width = fromEl.width() + 'px'
            img.style.height = fromEl.height() + 'px'
            img.style.position = 'fixed'
            img.style.zIndex = '1000'
            img.style.left = fromX + 'px'
            img.style.top = fromY + 'px'
            document.getElementsByTagName('body')[0].appendChild(img)
            var fakeEl = $(img)
            fakeEl.animate({
                left: toX
            }, 2000, null, function ()
            {
                fakeEl.animate({
                    width: fromEl.width() * 0.2,
                    height: fromEl.height() * 0.2,
                    top: toY
                }, 2000, null, function ()
                {
                    fakeEl.remove()
                    if (callback)
                    {
                        callback()
                    }
                })
            })
        }
        $('button').click(function ()
        {
            AddToCart($('.googsimg'), $('li').eq(2), function ()
            {
                console.log('一件商品已经加入购物车')
            })
        })
    </script>
</body>
</html>

717606641

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js加入购物车动画

最近项目需要一个添加购物车动画，然后自己研究了一下先上效果图商品静静躺在那里点击购物车，开始播放动画最终，商品图片落入购物车商品图片落入购物车后，有一个回调函数可以在动画播放完毕执行真正的加入购物车操作，比如在购物车加上一个数字什么的以下是全部代码购物车动画加入购物车
复制链接

扫一扫