实现功能:
点击三个不同的按钮,实现按照随机排序、升序、降序排列。
源码下载地址链接:
https://pan.baidu.com/s/1VEgJ7ckOiqQjKLe5XAQ7kQ 提取码: r5dm 复制这段内容后打开百度网盘手机App，操作更方便哦
源码文档:
-------------------------------------------------------------------这是分割线--------------------------------------------------------
<!DOCTYPE html>
<html lang="ZH-cn">
<head>
<meta charset="UTF-8">
<title>商品排序</title>
<style>
.box {
position: relative;
width: 800px;
height: 520px;
border: 1px solid #c9c9c9;
border-radius: 3px;
margin: 100px auto;
overflow: hidden;
}
ul {
padding-left: 0;
margin: 0;
list-style: none;
width: 750px;
height: 390px;
position: absolute;
top: 34px;
left: 34px;
}
ul li {
position: relative;
width: 174px;
height: 200px;
float: left;
margin: 15px 11px 0 0;
transition-duration: 0.5s;
transition-timing-function: linear;
cursor: pointer;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5);
}
/*悬停在li往上浮动*/
ul li:hover {
transform: translateY(-10px);
}
ul li img {
width: 174px;
height: 174px;
float: left;
}
/*超出...显示*/
ul li span.msg {
font-size: 12px;
font-weight: 400;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 125px;
height: 18px;
display: block;
}
ul li .msgBox.show {
position: absolute;
z-index: 100;
width: 170px;
height: 35px;
/* background-color: skyblue; */
font-size: 12px;
color: violet;
}
ul li .priceArea {
position: absolute;
width: 45px;
height: 50px;
bottom: 0px;
right: 0px;
background-color: #f04a40;
border-radius: 50%;
transform: rotate(30deg);
}
ul li .priceArea .price {
display: block;
transform: rotate(-30deg);
color: #ffffff;
font-size: 14px;
font-weight: bold;
line-height: 50px;
}
.box .buttonArea {
position: absolute;
width: 230px;
height: 35px;
bottom: 10px;
right: 25px;
}
.box .buttonArea button {
float: left;
width: 70px;
height: 100%;
background-color: #ff6f02;
border-style: none;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 35px;
margin-right: 5px;
border: 1px solid #446d88;
border-radius: .2em;
box-shadow: 0 .05em .25em #335166;
text-shadow: 0 -0.05em 0.5em rgba(0, 0, 0, 0.5);
}
/*悬浮button*/
.box .buttonArea button.hover {
background: rgba(0, 0, 0, 0.5);
}
/*悬浮时弹窗*/
li .talkBox.show {
position: absolute;
width: 200px;
height: 50px;
background-color: silver;
margin: 100px auto;
border: 1px solid lightcoral;
border-radius: 3px;
transform: scale(0.7);
top: 11px;
left: -29px;
opacity: 0.7;
/* text-align: center; */
/* line-height: 50px; */
}
li .talkBox.show::before {
content: "";
width: 30px;
height: 30px;
position: absolute;
top: 35px;
left: 30px;
background: linear-gradient(-45deg, silver 50%, transparent 50%);
border: inherit;
transform: rotate(45deg);
border-top: 0;
border-left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul id="content">
</ul>
<div class="buttonArea">
<button class="random">随机排序</button>
<button class="aesOrder">从低到高</button>
<button class="desOrder">从高到低</button>
</div>
</div>
<script>
var goods = [
{
name: "商品1",
msg: "甜美七分袖荷叶边条纹设计,给人恋爱般的感觉",
src: "./pic/flower1.jpg",
price: 97
},
{
name: "商品2",
msg: "甜美七分袖荷叶边条纹,秀出时尚美,自然美",
src: "./pic/flower2.jpg",
price: 99.5
},
{
name: "商品3",
msg: "深红色经典玫瑰深受大家喜爱,深红色经典玫瑰深",
src: "./pic/flower3.jpg",
price: 100
},
{
name: "商品4",
msg: "经典红色我的最爱,经典红色我的最爱",
src: "./pic/flower4.jpg",
price: 130
},
{
name: "商品5",
msg: "粉红色浪漫系列首选,粉红色浪漫系列首选",
src: "./pic/flower5.jpg",
price: 215
},
{
name: "商品6",
msg: "清淡优雅百年好合,清淡优雅百年好合",
src: "./pic/flower6.jpg",
price: 300
},
{
name: "商品7",
msg: "粉色浪漫系列玫瑰,粉色浪漫系列玫瑰",
src: "./pic/flower7.jpg",
price: 500
},
{
name: "商品8",
msg: "紫色冷艳系列,紫色冷艳系",
src: "./pic/flower8.jpg",
price: 700
}
]
let oUl = document.getElementById("content"),
oBtnRandom = document.querySelector(".box .buttonArea .random"),
oBtnAse = document.querySelector(".box .buttonArea .aesOrder"),
oBtnDse = document.querySelector(".box .buttonArea .desOrder");
let oBtn = document.querySelectorAll(".box .buttonArea button");
let oBtnStatus = []
// 点击随机排序按钮
oBtnRandom.onclick = function () {
goods.sort(() => Math.random() - 0.5) //goods随机排序
render()
spanShow()
buttonAction()
//删除所有按钮样式
oBtn.forEach(function(item){
item.classList.remove("hover")
})
this.classList.add("hover") //添加当前按钮样式
//添加当前按钮标识
oBtnStatus = []
oBtnStatus[0] = 1
}
//点击升序按钮
oBtnAse.onclick = function () {
goods.sort(function (a, b) {
return a.price - b.price
})
render()
spanShow()
buttonAction()
oBtn.forEach(function(item){
item.classList.remove("hover")
})
this.classList.add("hover")
oBtnStatus = []
oBtnStatus[1] = 1
}
//点击降序按钮
oBtnDse.onclick = function () {
goods.sort(function (a, b) {
return b.price - a.price
})
render()
spanShow()
buttonAction()
oBtn.forEach(function(item){
item.classList.remove("hover")
})
this.classList.add("hover")
oBtnStatus = []
oBtnStatus[2] = 1
}
// 渲染数据
function render() {
oUl.innerHTML = ""
goods.forEach(function (item) {
oUl.innerHTML +=
`<li>
<img src=${item.src} alt="">
<div class="talkBox"></div>
<span class="msg">${item.msg}</span>
<div class="priceArea">
<span class="price">￥${item.price}</span>
</div>
</li>`
})
}
//悬浮在商品描述上,显示完整信息
function spanShow() {
let oSpanMsg = document.querySelectorAll("ul li span.msg");
let otalkBox = document.querySelectorAll("li .talkBox");
oSpanMsg.forEach(function (item, index) {
//悬浮描述时,展开详细描述
item.onmouseenter = function () {
otalkBox[index].classList.add("show")
otalkBox[index].innerHTML = item.innerHTML
}
//移出描述时,详细描述消失
item.onmouseleave = function () {
otalkBox[index].classList.remove("show")
otalkBox[index].innerHTML = ""
}
})
}
//升序 降序 随机按钮移入 移出的一些效果
function buttonAction() {
oBtn.forEach(function (item, index, arr) {
//按钮移入 改变样式
item.onmouseenter = function () {
item.classList.add("hover")
}
// 按钮移出 去掉样式
item.onmouseleave = function(){
if (!oBtnStatus[index]) {
item.classList.remove("hover")
}
}
})
}
//初始化 渲染 悬浮显示title
render()
spanShow()
buttonAction()
</script>
</body>
</html>
---------------------------------------------------------------我是分割线------------------------------------------------------------
其中的一些细节：
一.商品描述,超出部分...显示,悬浮时显示全部描述。
1.超出部分点点点
/*超出...显示*/
ul li span.msg {
font-size: 12px;
font-weight: 400;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 125px;
height: 18px;
display: block;
}
2.悬浮时对话框。
这里我是自己写的样式,其实这种可以直接用阿里标签来实现。
其中对话框的那个小三角,是用伪类元素实现的,talkBox.show::before 。
/*悬浮时弹窗*/
li .talkBox.show {
position: absolute;
width: 200px;
height: 50px;
background-color: silver;
margin: 100px auto;
border: 1px solid lightcoral;
border-radius: 3px;
transform: scale(0.7);
top: 11px;
left: -29px;
opacity: 0.7;
/* text-align: center; */
/* line-height: 50px; */
}
li .talkBox.show::before {
content: "";
width: 30px;
height: 30px;
position: absolute;
top: 35px;
left: 30px;
background: linear-gradient(-45deg, silver 50%, transparent 50%);
border: inherit;
transform: rotate(45deg);
border-top: 0;
border-left: 0;
}
二.随机、升序、降序三个按钮,悬浮时和点击时的样式
1.鼠标移入时置灰,移出时取消置灰;
2.点击后移出,不取消置灰;
//升序 降序 随机按钮移入 移出的一些效果
function buttonAction() {
oBtn.forEach(function (item, index, arr) {
//按钮移入 改变样式
item.onmouseenter = function () {
item.classList.add("hover")
}
// 按钮移出 去掉样式
item.onmouseleave = function(){
if (!oBtnStatus[index]) {
item.classList.remove("hover")
}
}
})
}
oBtnStatus数组,用来储存按钮点击后的状态,移出时,根据状态来判断是否取消置灰;
item.onmouseleave = function(){
if (!oBtnStatus[index]) {
item.classList.remove("hover")
}
}
三.数据是根据goods数组,渲染到页面的
// 渲染数据
function render() {
oUl.innerHTML = ""
goods.forEach(function (item) {
oUl.innerHTML +=
`<li>
<img src=${item.src} alt="">
<div class="talkBox"></div>
<span class="msg">${item.msg}</span>
<div class="priceArea">
<span class="price">￥${item.price}</span>
</div>
</li>`
})
}
其中goods为:
var goods = [
{
name: "商品1",
msg: "甜美七分袖荷叶边条纹设计,给人恋爱般的感觉",
src: "./pic/flower1.jpg",
price: 97
},
{
name: "商品2",
msg: "甜美七分袖荷叶边条纹,秀出时尚美,自然美",
src: "./pic/flower2.jpg",
price: 99.5
},
...
}
四.排序
1.随机排序
goods.sort(() => Math.random() - 0.5)
2.升序
goods.sort(function (a, b) {
return a.price - b.price
})
3.降序
goods.sort(function (a, b) {
return b.price - a.price
})