JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header>
<span class="shopcountwrap">
<i class="shopping-cart"></i>
<div id="countHolder" class="bage">0</div>
</span>
</header>
<div style ="margin-top:20px;">
<div class="item">
<div class="title-bar">
<a href="Local-detail.html" class="car-name">2004 Honda Fit Canter .</a>
</div>
<div class="photo">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
</div>
<div class="detail-text ">
Hyndai Grand Starex, 2008,
</div>
<div class="action clearfix ">
<div class="inquery-btn" data-toggle="modal" data-target="#inquiry">Inquery</div>
<div id="cart1" class="addcart">Add Cart</div>
</div>
</div> <!-- END item -->
<div class="item">
<div class="title-bar">
<a href="Local-detail.html" class="car-name">2004 Honda Fit Canter .</a>
</div>
<div class="photo">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
</div>
<div class="detail-text ">
Hyndai Grand Starex, 2008,
</div>
<div class="action clearfix ">
<div class="inquery-btn" data-toggle="modal" data-target="#inquiry">Inquery</div>
<div id="cart2" class="addcart"> Add Cart</div>
</div>
</div> <!-- END item -->
<div class="item">
<div class="title-bar">
<a href="Local-detail.html" class="car-name">2004 Honda Fit Canter .</a>
</div>
<div class="photo">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
</div>
<div class="detail-text ">
Hyndai Grand Starex, 2008,
</div>
<div...
CSS
header{
text-align:right;
width:700px;
padding-top:10px;
}
.shopcountwrap{
position:relative;
}
.bage{
background-color: red;
border-radius: 50%;
color: white;
height: 20px;
left: 1px;
line-height: 20px;
padding: 0;
position: absolute;
text-align: center;
top: -22px;
width: 20px;
z-index: 1;
}
.shopping-cart {
display: inline-block;
background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0;
width: 24px;
height: 24px;
margin: 0 10px 0 0;
}
.item{
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
overflow:hidden;
color:#777777;
float: left;
position: relative;
margin-right:10px;
}
.inquery-btn,.addcart{
background-color: #E6E6E6;
border-right: 1px solid #BBBBBB;
cursor: pointer;
font-size: 9pt;
padding: 9px 0;
text-shadow: 1px 1px 0 #FFFFFF;
float:left;
width:49%;
color:#000;
text-align:center;
}
.clearfix{
clear:both;
}
JavaScript
var completedIncrements = [];
$('.addcart').on('click', function () {
console.log(completedIncrements.indexOf(this.id));
if( completedIncrements.indexOf(this.id) == -1 ) {
var count = parseInt($("#countHolder").text());
$("#countHolder").html(count + 1);
completedIncrements.push(this.id);
}
var cart = $('icon-shopping-cart');
var imgtodrag = $(this).parent().parent('.item').children().next().find("img").eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');
setTimeout(function () {
cart.effect("shake", {
times: 2
}, 200);
}, 1500);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});