码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-10-12 00:29:13      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

前台页面

<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;  /*把新加的图片给个绝对定位,好做动画效果*/
}

 

<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>

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

标签:

原文地址:http://www.cnblogs.com/Sea1ee/p/5951081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!