javascript-function/example/buy-car/demo.html at master · horsekitlin/javascript-function · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
    <script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
  <style>
        *{margin:0;padding:0;list-style: none;}
        body{background: #fff;}
        .head-shopcart{width: 180px;height: 30px;line-height: 30px;text-align: left;padding: 0 10px;position: fixed;right: 0px;bottom: 0px;background: #D13131; color:#fff;font-size: 12px;}
            #lanren{width: 430px;height: auto;margin: 100px auto;background: #fff;}
            #lanren li{width: 200px;height: auto;float: left;margin:10px 0 0 10px;overflow: hidden;text-align: center;}
            #lanren li img{margin-bottom: 10px;}
            #lanren li a.btn-buy{width: 200px;height: 37px;margin-bottom:10px;display:block;background: url(http://demo.lanrenzhijia.com/2015/cart0327/images/btn-buy.jpg) no-repeat center top #D13131;overflow: hidden;}
  </style>
</head>
<body>
  <ul id="lanren">
		<li>
			<img src="http://demo.lanrenzhijia.com/2015/cart0327/images/lanren01.jpg" width="200" height="320">
			<a href="javascript:;" class="btn-buy"></a>
		</li>
		<li>
			<img src="http://demo.lanrenzhijia.com/2015/cart0327/images/lanren02.jpg" width="200" height="320">
			<a href="javascript:;" class="btn-buy"></a>
		</li>
	</ul>
	<div id="image"></div>
<div class="head-shopcart">我是購物車</div>
</body>
<script language='javascript'>

    $(".btn-buy").bind('click', function(e){
        var img = $(this).parent().find('img');
        var flyimg = img.clone();
        $("#image").append(flyimg);
        flyimg.css({
            'z-index': 30,
			'position': 'absolute',
			'top': img.offset().top +'px',
			'left': img.offset().left +'px',
			'width': img.width() +'px',
			'height': img.height() +'px'
        });
        flyimg.animate({
            top: $('.head-shopcart').offset().top,
			left: $('.head-shopcart').offset().left,
			width : 30,
            height : 20,
        }, function(){
            flyimg.remove();
        });
    });
</script>
</html>