1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 var $btn = $('#btn');
10 var $chart = $('.chart');
11 var $countadd = $('.chart em');
12 var $point = $('.point');
13
14 var $w01 = $btn.outerWidth();
15 var $h01 = $btn.outerHeight();
16
17 var $w02 = $chart.outerWidth();
18 var $h02 = $chart.outerHeight();
19
20 $btn.click(function(){
21 var oPos01 = $btn.offset();
22 var oPos02 = $chart.offset();
23
24 $point.css({'left':oPos01.left+parseInt($w01/2)-5,'top':oPos01.top+parseInt($h01/2)-5});
25 $point.show();
26 $point.animate({'left':oPos02.left+parseInt($w02/2)-5,'top':oPos02.top+parseInt($h02/2)-5},2000,function(){
27 $point.hide();
28 var iNum = $countadd.html(); // 获取em元素内的内容
29 $countadd.html(parseInt(iNum)+1); // 往em元素写入内容
30 });
31
32
33 });
34 });
35 </script>
36 <style type="text/css">
37 .chart{
38 height: 100px;
39 width: 100px;
40 background-color: gold;
41 text-align: center;
42 line-height: 100px;
43 float: right;
44 }
45 .chart em{
46 font-style: normal;
47 color: red;
48 font-weight: bold;
49 }
50 #btn{
51 height: 30px;
52 width: 200px;
53 outline: none;
54 float: left;
55 margin: 300px auto 0;
56
57 }
58 .point{
59 height: 10px;
60 width: 10px;
61 background-color: red;
62 position: fixed;
63 left: 0;
64 top: 0;
65 display: none;
66 border-radius: 50%;
67 z-index: 999;
68 }
69 </style>
70 </head>
71 <body>
72 <div class="chart">购物车<em>0</em></div>
73 <input type="button" name="" value="加入购物车" id="btn">
74 <div class="point"></div>
75 </body>
76 </html>
