飞入购物车特效

最新推荐文章于 2023-06-08 17:33:36 发布

真实的曼巴

最新推荐文章于 2023-06-08 17:33:36 发布

阅读量528

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/gongstrong123/article/details/51142088

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

用jquery实现飞入购物车特效

原理：
获取每个商品的坐标A，和购物车的坐标B，当点击商品的时候，绑定一个事件D ,D事件内处理商品图片，并设置一个动画，让商品图片从A点　到Ｂ点　，并且改变下图片的样式，就能达到效果，具体实现代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fly</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .cart {
            width: 100px;
            height: 100px;
            border: solid 1px red;
            color: green;
            text-align: center;
            line-height: 100px;
            position: fixed;
            top: 0;
            right: 300px;
        }

        .div1 {
            width: 980px;
            height: 100px;
            background: purple;
            margin: auto;
            font-size: 30px;
            color: red;
            line-height: 100px;
            text-align: center;
        }

        .div2 {
            width: 980px;
            height: auto;
            margin: auto;

        }

        .product {
            width: 100px;
            height: 100px;
            background: green;
            margin-top: 10px;
            cursor: pointer;
        }

        .product1 {
            background: red;

        }

        .product2 {
            background: blue;

        }

        .product3 {
            background: greenyellow;

        }

        .product4 {
            background: yellow;

        }

        .product5 {
            background: green;

        }
    </style>
</head>
<body>

<div class="div1">欢迎来到美丽商城</div>

<div class="div2">
    <div class="product product1">

    </div>
    <div class="product product2">

    </div>
    <div class="product product3">

    </div>
    <div class="product product4">

    </div>
    <div class="product product5">

    </div>
</div>
<div class="cart">购物车</div>

<script src="jquery-2.2.2.min.js"></script>
<script>
    $(".product").click(function () {
        var x = $(this).offset().left;
        var y = $(this).offset().top;
        var w = $(this).width();
        var h = $(this).height();

        var product = $(this).clone().css('opacity', 0.75);
        $(this).parent().append(product);
        product.css({
            'z-index': 9000,
            'display': 'block',
            'position': 'absolute',
            'top': y + 'px',
            'left': x+ 'px',
            'width': w+'px',
            'height': h + 'px'
        });
        product.animate({
            top: $(".cart").offset().top,
            left: $(".cart").offset().left,
            width: 90,
            height: 90
        },'slow',function(){
            product.remove();
        });
    });
</script>
</body>
</html>

真实的曼巴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
飞入购物车特效

用jquery实现飞入购物车特效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>fly</title> <style> * { padding: 0; margin: 0; } .cart {
复制链接

扫一扫