前台页面
<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": "", "width": "" }, , function () {
$(".CarNum").text("");
});//新图做动画，原图不变
}
});
});
</script>
</head>
<body>
<header>
<span>登陆</span><span>注册</span><span>购物车<span class="CarNum"></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;"></span></p>
<p>数量：<span class="mynum"></span></p>
<p><span class="Car">加入购物车</span><span class="gm">立即购买</span></p>
</div>
</div>
</body>
</html>
样式表
*{
margin:;
padding:;
}
header {
text-align:right;
background-color:rgba(, , , 0.70);
padding:5px 20px;
}
header span{
margin-left:10px;
}
.CarNum {
margin:;
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(, , , 0.79);
margin-left: 10px;
border-radius: 10px; /*圆角*/
cursor: pointer; /*光标改为手*/
}
.mydh {
width: 200px;
height: 240px;
opacity: .;
z-index: ; /*两张图片 把这样置于顶层*/
position: absolute; /*把新加的图片给个绝对定位，好做动画效果*/
}