jQuery 特效之添加商品到购物车

Posted 2020-08-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 特效之添加商品到购物车相关的知识，希望对你有一定的参考价值。

前台页面

<link href="MyCar.css" rel="stylesheet" />
    <script src="../jquery.js"></script>
    <script>
        $(function () {
            $(".Car").click(function () {
                var path = $(".dh").attr("src"); //拿到图片路径
                var top = $(".dh").offset().top; //得到原图的到上面的距离    offset()  偏移量
                var left = $(".dh").offset().left;  //到左边距离 
                var im = ‘<img class="mydh" src="‘ + path + ‘" style="top:‘ + top + ‘px;left:‘ + left + ‘px" />‘;//得到新的图片 这个位置就是原图位子
                if (!$(".mydh").is(":animated")) {  //如果没有做动画
                    $(".M_Img").append(im);  //在div为M_Img里面添加一张图片把原图覆盖掉
                    $(".mydh").animate({ "top": "10px", "left": "1000px", "height": "0", "width": "0" }, 2000, function () {
                        $(".CarNum").text("1"); 
                    });//新图做动画，原图不变
                }               
            });
        });
    </script>    
</head>
<body>
    <header>
        <span>登陆</span><span>注册</span><span>购物车<span class="CarNum">0</span></span><span>客服服务</span><span>投诉建议</span><span>联系我们</span>
    </header>
    <div class="Main">
        <h3>游戏动漫>>>海贼王>>>路飞</h3>
        <div class="M_Img">
            <img class="dh" src="img/01.jpg" style="width:200px; height:240px;" />
        </div>
        <div class="M_AddCar">
            <p>这是要成为海贼王的男人</p>
            <p>价格：￥<span style="color:red;">8888</span></p>
            <p>数量：<span class="mynum">1</span></p>
            <p><span class="Car">加入购物车</span><span class="gm">立即购买</span></p>
        </div>
    </div>
</body>
</html>

样式表

*{
    margin:0;
    padding:0;
   
}

header {
    text-align:right;
     background-color:rgba(174, 171, 171, 0.70);
     padding:5px 20px;
   
}

header  span{
    margin-left:10px;
}
.CarNum {
    margin:0;
    color:red;
}
.M_Img{
    margin-top:80px;
    padding-left:30px;
    width:300px;
    height:280px;
    float:left;
}

.M_AddCar {
    margin-top: 80px;
    padding-left: 30px;
    width: 500px;
    height: 280px;
}

 .M_AddCar p {
        margin-top: 30px;
    }

.Car, .gm {
    padding: 10px;
    background-color: rgba(255, 106, 0, 0.79);
    margin-left: 10px;
    border-radius: 10px;   /*圆角*/
    cursor: pointer;  /*光标改为手*/
}

.mydh {
    width: 200px;
    height: 240px;
    opacity: .8;
    z-index: 999;  /*两张图片 把这样置于顶层*/
    position: absolute;  /*把新加的图片给个绝对定位，好做动画效果*/
}

以上是关于jQuery 特效之添加商品到购物车的主要内容，如果未能解决你的问题，请参考以下文章

jquery easyui拖动商品添加购物车

jQuery仿购物车案例

jQuery属性操作之toggleClass()和hasClass()方法的比较

用jquery 实现购物车里面的商品添加或者减少的功能

电商项目测试实战之购物车页面用例设计建议收藏

jQuery 特效之 添加商品到购物车

jQuery 特效之添加商品到购物车