jquery之抛物线式购物车

最新推荐文章于 2024-07-18 15:09:36 发布

viser123

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量662

点赞数

分类专栏： html5 前端 js 文章标签： js web前端 jquery html5

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html5 前端

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抛物线式购物车</title>
<script src="jquery-1.11.3.js"></script>
<script src="tz_fly.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.banner {
width: 100%;
height: 160px;
background-image: url("../images/banner.jpg");
}

.p_list {
width: 1000px;
height: 380px;
margin: 4% auto;
}

.list_1 {
width: 240px;
height: 374px;
float: left;
margin: 2px 2px;
border: 1px solid #bbbbbb;
}

.list_1 p {
color: #666666;
font-size: 13px;
margin: 3%;

}

.list_1 div {
margin-top: 5%;
margin-left: 3%;
}

.list_1 img {
margin-left: 4px;
margin-top: 4px;
}

.list_1 div span:first-child {
color: red;
font-weight: bold;
}

.list_1 div span:last-child {
color: #ffffff;
font-weight: bold;
border-radius: 6px;
display: inline-block;
float: right;
width: 88px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: red;
cursor: pointer;
margin-right: 4px;
}

.right {
position: fixed;
width: 263px;
height: 100%;
top: 0;
right: -221px;
}

.right .p_car, .right .p_shop {
float: left;
height: 100%;
}

.p_shop {
width: 221px;
background-color: #dddddd;
}

.p_car {
width: 42px;
background-color: #000000;
}

.p_car div {
color: #ffffff;
width: 42px;
height: 76px;
background-color: red;
padding: 11px 12px;
margin-top: 234px;
cursor: pointer;
}

.p_shop dl {
width: 209px;
height: 74px;
margin: 4px 6px;
padding-top: 4px;
padding-left: 3px;
border: 1px solid #aaaaaa;
}

.p_shop dl dt, .p_shop dl dt img {
width: 60px;
height: 62px;
}

.p_shop dl dd {
width: 131px;
height: 31px;
font-size: 14px;
margin-top: 6px;
margin-left: 10px;

}

.p_shop dl dt, .p_shop dl dd {
float: left;
}

.p_shop dl dd:last-child {
font-size: 16px;
color: red;
}

.no_shop {
padding-top: 10%;
text-indent: 24px;
padding-left: 10%;
width: 200px;
height:30px;
color: #e4393c;
font-size: 14px;
font-weight: bold;
}

.del {
float: right;
display: inline-block;
width: 44px;
height:24px;
text-align: center;
line-height: 24px;
background-color: red;
color: #ffffff;
font-weight: bold;
border-radius: 5px;
margin-top: -4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="banner">
</div>
<div class="p_list">
<div class="list_1">
<img src="images/icon_list1.png" alt="张靓颖">
<p>2016夏季新品唯品会正装</p>
<div>
<span>￥368.0</span>
<span class="buy">加入购物车</span>
</div>
</div>
<div class="list_1">
<img src="images/icon_list2.png" alt="安以轩">
<p>2016夏季新品唯品会正装</p>
<div>
<span>￥368.0</span>
<span class="buy">加入购物车</span>
</div>
</div>
<div class="list_1">
<img src="images/icon_list3.png" alt="桂纶镁">
<p>2016夏季新品唯品会正装</p>
<div>
<span>￥368.0</span>
<span class="buy">加入购物车</span>
</div>
</div>
<div class="list_1">
<img src="images/icon_list4.png" alt="陈瑶">
<p>2016夏季新品唯品会正装</p>
<div>
<span>￥368.0</span>
<span class="buy">加入购物车</span>
</div>
</div>
</div>
<div class="right">
<div class="p_car">
<div>
购物车
</div>
</div>
<div class="p_shop">
<div class="no_shop">
你还没有购买任何 <br> 物品，快去选购吧！！！
</div>










</div>
</div>
<script>
$(document).ready(function () {
var iskong = $("dl").length;
if (iskong == 0) {
$(".no_shop").show();
} else {
$(".no_shop").hide();
}
//右边显示隐藏效果
var isopen = 0;
$(".p_car > div").click(function () {
if (isopen == 0) {
$(".right").animate({right: "0"}, 500);
isopen = 1;
} else if (isopen == 1) {
$(".right").animate({right: "-221px"}, 500);
isopen = 0;
}
});

//购买物品

$(".buy").click(function () {
var iskong = $("dl").length;
if (iskong === 0) {
$(".no_shop").show();
} else {
$(".no_shop").hide();
}
var p_imgsrc = $(this).parent().siblings("img").attr("src");
var p_text = $(this).parent().siblings("p").text();
var p_price = $(this).siblings().text();
var str = '<dl><dt>'
+ '<img src="' + p_imgsrc + '" alt="张靓颖">'
+ '</dt><dd class="decoration">' + p_text + '</dd>'
+ '<dd class="price"><span>' + p_price + '</span><span class="del">删除</span></dd></dl>';

$(".p_shop").append(str);
$(".no_shop").hide();
fei(event);
$(".right").animate({right: "-0"}, 500);
});
//删除商品
$(".right").delegate(".del", "click", function () {
$(this).parents("dl").remove();
if ($("dl").length === 0) {
$(".no_shop").show();
} else {
$(".no_shop").hide();
}
// var del_dl = $(del_dd).parents();
});// bind click on

//抛物线
function fei(event) {
var end_L = $(".p_car div").offset().left;
var end_T = $(".p_car div").offset().top;
var _this = $(event.target);
var src = $(_this).parents().siblings("img").attr("src");
var feier = $("<img src='" + src + "' width='100' height='100'>");
feier.fly({
start: {
left: event.clientX,//获取点击购物车按钮X,Y坐标
top: event.clientY
},
end: {
left: end_L,
top: end_T
},
onEnd: function () {
//对象淡出完成过后在执行后面的函数
feier.fadeOut("slow", function () {
$(this).remove();
})
}
})
}

})
</script>
</body>

</html>

viser123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery之抛物线式购物车

抛物线式购物车* {margin: 0;padding: 0;box-sizing: border-box;}.banner {width: 100%;height: 160px;background-image: url("../images/banner.jpg");}.p_list {width: 1000px;
复制链接

扫一扫

专栏目录