css
body{margin: 0;}
.btn{position: fixed; bottom: 5px; right: 10px;}
.l{ width: 80%; float: left; background: #eee;height: 100%;;}
.r{width: 20%; right: 0; height: 100%; position: fixed; text-align: center;}
.product{ width: 200px; overflow: hidden; background: #ddd; padding: 10px; margin: 10px;}
.product ._img .productimg{ background-size: over; width:200px; height: 150px; }
html
<div class="l">
<ul id="ulproduct">
<li class="product">
<div class="_img"> <img class="productimg" src="图片" alt=""> </div>
<div>产品名字产品名字产品名字</div>
<div>
<span>价格:20</span><span>库存:10</span>
</div>
<div><button id="submit">加入购物车</button></div>
</li>
</ul>
</div>
<div class="r">
<div>
<div>购物车</div>
<div>共<span class="count">0</span>件商品</div>
</div>
</div>
jquery
$(document).ready(function(){
//购物车
/**
* 1.点击购物车右侧+1个商品
* 2.点击的商品的图片飞翔到右侧商品数那里 (1.取到图片路径 2.图片显示到页面上 3.飞到右侧 4.飞入的过程,图片移动)
* 3.飞入后商品增加图片删除
* **/
$('body').on('click','#submit',function(){
var vm =$(this);
var count = $('.count').text();
//移动到的位置
var x =$('.count').offset();
var productImg =vm.parent().siblings('._img').find('img');
var shoopingImg = productImg.clone();
shoopingImg.css({
//克隆样式
"width": "250px", "height": "250px", "position": "absolute",
"top":productImg.offset().top,
"left":productImg.offset().left
});
shoopingImg.appendTo($("body")).animate(
{
top:x.top,left:x.left,width:'50',height:'50px'
},function(){
var s = shoopingImg.offset();
shoopingImg.remove();
++count;
$('.count').text(count);
})
})
});
</script>