jQuery商品飞入购物车效果

快乐打工仔 分类:实例代码

分享一段代码实例,它简单实现了飞入购物车效果的功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
padding: 10px;
overflow: hidden;
}
.left_a {
display: block;
width: 100px;
height: 100px;
text-align: center;
background: #ccc;
font-size: 26px;
float: left;
text-decoration: none;
color: #fff;
overflow: hidden;
margin-right: 18px;
}
.right_div {
position: relative;
}
.right_div h2 {
font-size: 16px;
color: #666;
}
.right_div p {
font-size: 14px;
color: #666;
padding-top: 8px;
}
.add_cart {
display: block;
position: absolute;
top: 74%;
right: 2%;
border: 1px solid red;
padding: 4px 8px;
text-align: center;
font-size: 16px;
text-decoration: none;
background: rgba(0, 180, 0, 0.5);
color: #fff;
}
.cart_shop {
width: 80px;
height: 80px;
border-radius: 50%;
background: #d2d2d2;
box-shadow: 0 0 2px #d2d2d2;
line-height: 80px;
text-align: center;
border-radius: 50%;
position: fixed;
bottom: 50px;
right: 3%;
}
.cart_shop a {
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
top: 0;
right: 0;
background: red;
border-radius: 50%;
color: white;
font-size: 12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
$(".add_cart").click(function () {
$(".cart_shop a").text(parseInt($(".cart_shop a").text()) + 1);
var shopOffset = $(".cart_shop").offset();
var leftaOffset = $(this).parent().siblings('.left_a').offset();
var cloneDiv = $(this).parent().siblings('.left_a').clone();
cloneDiv.css({
"position": "absolute",
"left": leftaOffset.left,
"top": leftaOffset.top,
});
$(this).parent().siblings('.left_a').parent().append(cloneDiv);
cloneDiv.stop().animate({
width: 0,
height: 0,
left: shopOffset.left,
top: shopOffset.top,
opacity: 1
}, 'slow');
});
})
</script>
</head>
<body>
<ul>
<li>
<a href="#" class="left_a"></a>
<div class="right_div">
<a href="#" class="add_cart">添加</a>
</div>
</li>
<li>
<a href="#" class="left_a" style="color:green;"></a>
<div class="right_div">
<a href="#" class="add_cart">添加</a>
</div>
</li>
</ul>
<div class="cart_shop">
<a href="">0</a>
</div>
</body>
</html>

上面的代码实现了我们的要求,代码比较简单,更多内容可以参阅相关阅读。

相关阅读:

(1).parseInt()参阅javascript parseInt()一章节。

(2).offset()参阅jQuery offset()方法一章节。

(3).parent()参阅jQuery parent()方法一章节。

(4).siblings()参阅jQuery siblings()方法一章节。

jQuery商品飞入购物车效果,这样的场景在实际项目中还是用的比较多的,关于jQuery商品飞入购物车效果就介绍到这了。

jQuery商品飞入购物车效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容