jquery 购物车动画

最新推荐文章于 2022-12-05 17:46:55 发布

llxhzm

最新推荐文章于 2022-12-05 17:46:55 发布

阅读量170

点赞数

分类专栏： jquery 文章标签： animate jquery 购物车

本文链接：https://blog.csdn.net/qq_20059455/article/details/90482213

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>购物车动画实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f8f8f9;
        }
        /*商品列表*/
        .item {
            border-radius: 8px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 15px;
            margin: 15px;
        }
        .item .img {
            width: 60px;
            height: 60px;
            background-size: cover;
            background-position: center center;
            border-radius: 6px;
            margin-right: 13px;
            border: 1px solid #eee;
        }
        .item .label {
            align-self: flex-start;
            flex-grow: 1;
        }
        .item .buy {
            background: #8B61AA;
            border-radius: 4px;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            color: white;
        }

        /*购物车*/
        .cart-area {
            position: fixed;
            bottom: 0;
            height: 60px;
            width: 100%;
            background-color: #80848f;
            display: flex;
            align-items: center;
        }
        .cart-area .cart {
            background-color: white;
            color: #495060;
            height: 50px;
            width: 50px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
        }
    </style>
</head>
<body>
<h3 style="margin: 15px">商品入车动画（jq版）</h3>

<!--商品列表-->
<div class="list">
    <div class="item">
        <div class="img" style="background-image: url(//oss.xiaosk.com/library/thumb/etms_nfo/2019/2019-05-23/170FCA3E747A4D9AA48DF54A7F6770BC/pic.jpg);"></div>
        <div class="label">
            <h4>商品</h4>
            <br>
            <p>这是一个好商品</p>
        </div>
        <div class="buy">购买</div>
    </div>
</div>

<!--购物车-->
<div class="cart-area">
    <div class="cart">车</div>
</div>

<script>
    // 取购物车
    const cart = $('.cart');
    // 购买按钮绑定事件
    $('.buy').on('click', function () {
        // 1. 获取需要复制的图片对象
        const initImg = $(this).siblings('.img').eq(0);
        // 2. 获取对象的 属性值
        const style = {
            width: initImg.width(),
            height: initImg.height(),
            backgroundImage: initImg.css('backgroundImage'),
            backgroundSize: initImg.css('backgroundSize'),
            backgroundPosition: initImg.css('backgroundPosition'),
            borderRadius: initImg.css('borderRadius'),
            position: 'absolute',
            top: initImg.offset().top,
            left: initImg.offset().left
        };
        // 3. 创建新的图片
        const newImg = initImg.clone().css(style);
        // 4. 把复制的图片添加到页面中
        $('body').append(newImg);
        // 5. 图片的入车动画
        newImg.animate({ borderRadius: '50%', top: initImg.offset().top - initImg.height()/2, left: initImg.offset().left + initImg.width()/5 }, 300, 'swing');
        newImg.animate({ width: 0, height: 0, top: cart.offset().top + cart.height()/2, left: (cart.offset().left + cart.width() / 2) }, 300, 'swing', function() {
            newImg.remove();
        });
    })
</script>
</body>
</html>

llxhzm

关注

0
点赞
踩
1

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="format-detection" content="telephone=yes"&...
复制链接

扫一扫