Jquery特效---购物车代码

最新推荐文章于 2023-08-30 21:53:10 发布

koreain

最新推荐文章于 2023-08-30 21:53:10 发布

阅读量472

点赞数

本文链接：https://blog.csdn.net/koreain/article/details/77856228

版权

这篇博客展示了如何利用CSS和jQuery创建一个购物车效果。包括商品展示、悬停显示添加到购物车按钮等功能。通过定义样式和jQuery事件，实现了商品列表的美化和交互体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script src=js/jquery.min.js></script>
<link rel="stylesheet" type="text/css" href="css/shopping.css">
</head>

<body>
<div class="top">
<ul>

</ul>
</div>
<div class="content">
<div class="content-first">
<div class="pro-name">商品名称</div>
<div class="pro-price">单价</div>
<div class="pro-do">操作</div>
</div>

</div>

<script type="text/javascript">

$(function(){
var arr=[{ "imgUrl":"img/upan.png",
"pro-name":"LINE FRIENDS 新系列U盘16g",
"pro-price":234,
"pro-num":193},

{ "imgUrl":"img/dall.png",
"pro-name":"LINE FRIENDS 新玩偶公仔",
"pro-price":285,
"pro-num":100},

{ "imgUrl":"img/pag.png",
"pro-name":"LINE FRIENDS 13寸电脑包",
"pro-price":308,
"pro-num":1065},

{ "imgUrl":"img/prokect.png",
"pro-name":"LINE FRIENDS 零钱包可爱",
"pro-price":60,
"pro-num":109}];
//循环数组
var str="";
var oUl=$(".top ul");

for(var i=0;i<arr.length;i++){
str+="<li>";
str+="<div class='top-img'><img src='"+arr[i]["imgUrl"]+"' alt=''></div>";
str+="<span class='top-name'><a href='#'>"+arr[i]["pro-name"]+"</a></span>";
str+="<p class='top-price'>¥"+arr[i]["pro-price"]+".00</p>";
str+="<p class='top-num'>月销量"+arr[i]["pro-num"]+"</p>";
str+="<div class='addcar'>加入购物车</div>";
str+="</li>";
}
oUl.append(str);
//点击添加购物车项目
$(".addcar").click(function(){
var newDiv ="";
var index=$(this).parent().index();
var data=arr[index];
newDiv +="<div class='content-add'>"
newDiv += "<div class='content-img'><img src='"+data["imgUrl"]+"' alt=''></div>";
newDiv += "<div class='content-name'>"+data["pro-name"]+"</div>";
newDiv += "<div class='content-price'>¥"+data["pro-price"]+".00</div>";
newDiv += "<div class='content-do'><a href='#'>X</a></div></div>";
$(".content").append(newDiv);

//删除所选
$(".content-do a").click(function(){
$(this).parent().parent().remove();
})
})
})

</script>
</body>

</html>

================CSS部分===================

*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.top{
margin: 25px 400px;
height: 350px;
}
.top ul li{
list-style: none;
width: 220px;
float: left;
background: #F7F7F7;
text-align: center;
padding: 34px 0px 16px;
margin-left: 25px;
position: relative;

}
.top-img img{
width:150px;
height:150px;
margin: 0px auto 15px;
}
.top-name a{
color: #333;
}
.top-price{
color:#ff6700;
margin:15px 0px 16px;
}
.top-num{
color:#b0b0b0;
}
.addcar{
width: 220px;
position: absolute;
background: #84C59E;
height: 65px;
line-height: 65px;
top: 235px;
font-size: 22px;
color: #fff;
display: none;
}
.top li:hover .addcar{
display: block;
}
.content{
width: 75%;
margin:0 auto;
}
.content-first{
float: left;
width: 100%;
background:#84C59E;
height: 50px;
opacity:0.77;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
font-family:"微软雅黑";
}
.pro-name{
width: 60%;
float: left;
}
.pro-price{
width: 20%;
float: left;
}
.pro-do{
width: 20%;
float: left;
}
.content{
height: 600px;
}
.content-add{
width: 100%;
float: left;
background: #fff;
border-bottom: 1px solid #e0e0e0;
height: 100px;
}
.content-img,.content-name,.content-price,.content-do{
float: left;
line-height: 100px;
text-align: center;
height: 100px;
font-size: 18px;
}
.content-img{
width:15%;
}
.content-img img{
width: 80px;
height: 80px;
padding: 10px;
}
.content-name{
width: 45%;
}
.content-price,.content-do{
width: 20%;
}
.content-do a{
color: #000;
}