首页 > 代码库 > jQuery 特效之 添加商品到购物车
jQuery 特效之 添加商品到购物车
前台页面
<link href=http://www.mamicode.com/"MyCar.css" rel="stylesheet" /> <script src=http://www.mamicode.com/"../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="http://www.mamicode.com/‘ + 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=http://www.mamicode.com/"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="http://www.mamicode.com/MyCar.css" rel="stylesheet" /> <script src="http://www.mamicode.com/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="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/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 特效之 添加商品到购物车