效果：
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝</title>
<style>
body,
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
overflow: hidden;
}
.wrap {
width: 324px;
height: 327px;
/* border: 1px solid; */
margin: 0 auto;
background-color: #F7F7F7;
}
.logo {
width: 75px;
height: 55px;
float: left;
margin-top: 10px;
}
.logo img {
width: 100%;
height: 100%;
}
.right ul {
width: 245px;
margin-top: 15px;
overflow: hidden;
float: right;
}
.right ul li {
list-style: none;
float: left;
font-size: 12px;
margin-right: 8px;
}
.bottom {
overflow: hidden;
margin-top: 10px;
width: 100%;
background-color: #fff;
}
.bottom_left {
width: 58px;
margin-top: 10px;
float: left;
}
.bottom li {
cursor: pointer;
}
.bottom_left ul li {
text-align: center;
font-size: 12px;
height: 30px;
line-height: 30px;
background: linear-gradient(to bottom, #ffffff, #f6f6f6);
}
.bottom_img {
position: relative;
width: 200px;
height: 250px;
float: left;
}
.bottom_img img {
/* display: none; */
width: 100%;
height: 100%;
}
.bottom_right {
width: 58px;
margin-top: 10px;
float: right;
}
.bottom_right ul li {
text-align: center;
font-size: 12px;
height: 30px;
line-height: 30px;
background: linear-gradient(to bottom, #ffffff, #f6f6f6);
}
.bottom_text {
/* display: none; */
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 32px;
z-index: 100;
background: rgba(255, 255, 255, .8);
line-height: 32px;
}
.font {
font-size: 12px;
margin-left: 10px;
}
.money {
font-size: 12px;
color: #ff4200;
font-weight: 700;
float: right;
margin-right: 15px;
}
.active {
background: linear-gradient(to bottom, #ec271f, #8d0011) !important;
color: #fff;
}
</style>
<script>
window.onload = function () {
var aBtn = document.querySelectorAll('.bottom li');
var oImage = document.querySelector('#bottom_image');
var oBottomText = document.querySelector('#bottom_text');
var oBottomMoney = document.querySelector('#bottom-money');
var arr3 = [
"￥17.50",
"￥27.50",
"￥37.50",
"￥47.50",
"￥57.50",
"￥67.50",
"￥77.50",
"￥87.50",
"￥97.50",
"￥107.50",
"￥117.50",
"￥127.50",
"￥137.50",
"￥147.50",
"￥157.50",
"￥167.50",
];
var arr = [
"./images/冬裙.jpg",
"./images/呢大衣.jpg",
"./images/围巾.jpg",
"./images/女包.jpg",
"./images/女裤.jpg",
"./images/女靴.jpg",
"./images/棉服.jpg",
"./img/蚊帘.png",
"./images/毛衣.jpg",
"./images/牛仔裤.jpg",
"./images/男棉服.jpg",
"./images/男靴.jpg",
"./images/登山鞋.jpg",
"./images/皮衣.jpg",
"./images/羽绒服.jpg",
"./images/雪地靴.jpg"
];
var arr2 = [
"连衣裙",
"雪纺衫",
"凉鞋",
"女包",
"T恤",
"真丝裙",
"防晒衣",
"蚊帐",
"男T恤",
"男鞋",
"男包",
"休闲裤",
"半身裙",
"打底裤",
"短裤",
"衬衫"
];
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onmouseover = function () {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('active');
}
this.classList.add('active');
oImage.src = arr[this.index];
oBottomText.innerHTML = arr2[this.index];
oBottomMoney.innerHTML = arr3[this.index];
}
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="top">
<div class="logo">
<img src="./img/淘宝网1.png" alt="">
</div>
<div class="right">
<ul>
<li>蕾丝裙</li>
<li>牛仔裤</li>
<li>男凉鞋</li>
<li>情侣装</li>
<li>大码女装</li>
</ul>
<ul>
<li>休闲鞋</li>
<li>收纳箱</li>
<li>充电宝</li>
<li>运动装</li>
<li>童装</li>
</ul>
</div>
</div>
<div class="bottom">
<div class="bottom_left">
<ul>
<li>连衣裙</li>
<li>雪纺衫</li>
<li>凉鞋</li>
<li>女包</li>
<li>T恤</li>
<li>真丝裙</li>
<li>防晒衣</li>
<li class="active">蚊帐</li>
</ul>
</div>
<div class="bottom_img">
<img id="bottom_image" src="./images/冬裙.jpg" alt="" />
<!-- <img src="./images/呢大衣.jpg" alt="">
<img src="./images/围巾.jpg" alt="">
<img src="./images/女包.jpg" alt="">
<img src="./images/女裤.jpg" alt="">
<img src="./images/女靴.jpg" alt="">
<img src="./images/棉服.jpg" alt="">
<img src="./img/蚊帘.png" style="display: block;" alt="">
<img src="./images/毛衣.jpg" alt="">
<img src="./images/牛仔裤.jpg" alt="">
<img src="./images/男棉服.jpg" alt="">
<img src="./images/男靴.jpg" alt="">
<img src="./images/登山鞋.jpg" alt="">
<img src="./images/皮衣.jpg" alt="">
<img src="./images/羽绒服.jpg" alt="">
<img src="./images/雪地靴.jpg" alt=""> -->
<div class="bottom_text">
<span class="font" id="bottom_text">连衣裙</span>
<span class="money" id="bottom-money">￥57.50</span>
</div>
<!-- <div class="bottom_text">
<span class="font">雪纺衫</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">凉鞋</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">女包</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">T恤</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">真丝裙</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">防晒衣</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text" style="display: block;">
<span class="font">简易便捷蚊帐</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">男T恤</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">男鞋</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">男包</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">休闲裤</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">半身裙</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">打底裤</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">短裤</span>
<span class="money">￥57.50</span>
</div>
<div class="bottom_text">
<span class="font">衬衫</span>
<span class="money">￥57.50</span>
</div> -->
</div>
<div class="bottom_right">
<ul>
<li>男T恤</li>
<li>男鞋</li>
<li>男包</li>
<li>休闲裤</li>
<li>半身裙</li>
<li>打底裤</li>
<li>短裤</li>
<li>衬衫</li>
</ul>
</div>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
