index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京東</title>
<!--引入放大鏡字體圖標(biāo)（搜索框后面的圖標(biāo)），將下載的東西解壓后放入在css文件夾中-->
<link rel="stylesheet" href="./css/iconfont.css">
<!--引入大于小于號(hào)字體圖標(biāo)，需新建一個(gè)文件夾css1將其下載的東西解壓后載入css1文件夾中-->
<link rel="stylesheet" href="./css1/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
<!--引入京東圖標(biāo)-->
<link rel="icon" >
</head>
<body>
<!--頭部開始-->
<div class="header">
<div class="wrap header-box">
<div class="login">
<a href="首頁.html"><img src="./images/sprite.png"></a>
</div>
<div class="search">
<div class="search-m">
<!-- 吸頂時(shí)用的小圖標(biāo) -->
<div class="search-login"></div>
<div class="form">
<input type="text" class="keyword" placeholder="蘋果手機(jī)">
<button class="iconfont"></button>
<div class="search-helper"></div>
</div>
</div>
</div>
<div class="hotwords">
<a href="javascript:;" style="width:60px; color:#e1251b;">美妝護(hù)膚類</a></li>
<a href="javascript:;" style="width:48px;">新風(fēng)空調(diào)</a>
<a href="javascript:;"style="width:48px;">春款女裝</a>
<a href="javascript:;"style="width:48px;">真我新品</a>
<a href="javascript:;"style="width:48px;">電視直降</a>
<a href="javascript:;"style="width:48px;">新潮電腦</a>
<a href="javascript:;"style="width:48px;">美妝護(hù)膚</a>
</div>
<div class="navitems">
<ul>
<li style="width:82px;"><a href="javascript:;">京東超市</a></li>
<li style="width:52px;"><a href="javascript:;">秒殺</a></li>
<li style="width:82px;"><a href="javascript:;">便宜包郵</a></li>
<li style="width:82px;"><a href="javascript:;">京東生鮮</a></li>
<li style="width:82px;"><a href="javascripts:;">進(jìn)口好物</a></li>
<li style="width:82px;"><a href="javascriptd:;">京東家電</a></li>
<li style="width:89px;"><a href="javascript:;">PLUS會(huì)員</a></li>
<li style="width:52px;"><a href="javascript:;">拍賣</a></li>
</ul>
</div>
</div>
<!--頭部結(jié)束-->
<!--輪播圖開始-->
<div class="banner">
<div class="left">
<ul>
<li><a href="javascript:;">家用電器</a></li>
<li>
<a href="javascript:;">手機(jī)</a>
<span>/</span>
<a href="javascript:;">運(yùn)營(yíng)商</a>
<span>/</span>
<a href="javascript:;">數(shù)碼</a>
</li>
<li>
<a href="javascript:;">電腦</a>
<span>/</span>
<a href="javascript:;">辦公</a>
</li>
<li>
<a href="javascript:;">家居</a>
<span>/</span>
<a href="javascript:;">家具</a>
<span>/</span>
<a href="javascript:;">家裝</a>
<span>/</span>
<a href="javascript:;">廚具</a>
</li>
<li>
<a href="javascript:;">男裝</a>
<span>/</span>
<a herf="javascript:;">女裝</a>
<span>/</span>
<a href="javascript:;">童裝</a>
<span>/</span>
<a href="javascript:;">內(nèi)衣</a>
</li>
<li>
<a href="javascript:;">美妝</a>
<span>/</span>
<a href="javascript:;">個(gè)護(hù)清潔</a>
<span>/</span>
<a href="javascript:;">寵物</a>
</li>
<li>
<a href="javascript:;">女鞋</a>
<span>/</span>
<a href="javascript:;">箱包</a>
<span>/</span>
<a href="javascript:;">鐘表</a>
<span>/</span>
<a href="javascript:;">珠寶</a>
</li>
<li>
<a href="javascript:;">男鞋</a>
<span>/</span>
<a href="javascript:;">運(yùn)動(dòng)</a>
<span>/</span>
<a href="javascript:;">戶外</a>
</li>
<li>
<a href="javascript:;">房產(chǎn)</a>
<span>/</span>
<a href="javascript:;">汽車</a>
<span>/</span>
<a href="javascript:;">汽車用品</a>
</li>
<li>
<a href="javascript:;">母嬰</a>
<span>/</span>
<a href="javascript:;">玩具樂器</a>
</li>
<li>
<a href="javascript:;">食品</a>
<span>/</span>
<a href="javascript:;">酒類</a>
<span>/</span>
<a href="javascript:;">生鮮</a>
<span>/</span>
<a href="javascript:;">特產(chǎn)</a>
</li>
<li>
<a href="javascript:;">藝術(shù)</a>
<span>/</span>
<a href="javascript:;">禮品鮮花</a>
<span>/</span>
<a href="javascript:;">農(nóng)牧園藝</a>
</li>
<li>
<a href="javascript:;">醫(yī)藥保健</a>
<span>/</span>
<a href="javascript:;">計(jì)生情趣</a>
</li>
<li>
<a href="javascript:;">圖書</a>
<span>/</span>
<a href="javascript:">文娛</a>
<span>/</span>
<a href="javascript:;">教育</a>
<span>/</span>
<a href="javascript:;">電子書</a>
</li>
<li>
<a href="javascript:;">機(jī)票</a>
<span>/</span>
<a href="javascript:;">酒店</a>
<span>/</span>
<a href="javascript:;">旅游</a>
<span>/</span>
<a href="javascript:;">生活</a>
<span>/</span>
</li>
<li>
<a href="javascript:;">支付</a>
<span>/</span>
<a href="javascript:;">白條</a>
<span>/</span>
<a href="javascript:;">保險(xiǎn)</a>
<span>/</span>
<a href="javascript:;">企業(yè)金融</a>
</li>
<li>
<a href="javascript:;">安裝</a>
<span>/</span>
<a href="javascript:;">維修</a>
<span>/</span>
<a href="javascript:;">二手</a>
</li>
<li>
<a href="javascript:;">工業(yè)品</a>
<span>/</span>
<a href="javascript:;">元器件</a>
</li>
</ul>
</div>
<div class="wrap banner-box">
<div class="banner-slide">
<div class="slide">
<!--javascript:點(diǎn)擊沒有任何操作，不會(huì)跳轉(zhuǎn)-->
<a href="javascript:;"><img class="img" src="./images/1.jpg"></a>
<a href="javascript:;" class="prev"><span class="iconfont"></span></a>
<a href="javascript:;" class="next"><span class="iconfont"></span></a>
<ul class="banner-btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="j-user">
<div class="j-userimg">
<a class="user-lk" href="javascript:;"><img src="./images/xiazai.png"></a>
</div>
<div class="user-show">
<a href="javascript:;" style="width:94px;height:16px;">Hi~歡迎逛京東！</a><br>
<!-- <p style="width:106px; height:20px;"> -->
<a href="javascript:;" style="width:24px;height:16px;">登錄</a>
<span>|</span>
<a href="javascript:;" style="width:24px;height:16px;">注冊(cè)</a>
<!-- </p> -->
</div>
</div>
<div class="user-profit">
<a class="user-profit1" href="javascript:;">新人福利</a>
<a class="user-profit2" href="javascript:;">PLUS會(huì)員</a>
</div>
<hr>
<div class="J-news">
<div class="news-hd">
<h5>京東快報(bào) <a href="javascript:;" >更多</a></h5>
</div>
<ul class="new-list">
<li class="new-items">
<a href="javascript:;"><span class="new-tag">熱議</span>華碩靈耀14 2023: 2.8k OLED高刷屏輕薄本</a>
</li>
<li class="new-items"><a href="javascript:;"><span class="new-tag1">熱議</span>強(qiáng)健腸道才是正經(jīng)事，過來人寶媽真心話</a></li>
<li class="new-items"><a href="javascript:;"><span class="new-tag2">熱議</span>每次點(diǎn)點(diǎn)機(jī)器就可以喝到鮮活的水,非常的開心！</a></li>
<li class="new-items"><a href="javascript:;"><span class="new-tag3">熱議</span>200000轉(zhuǎn)風(fēng)扇看得見!紅魔8 pro+透明體驗(yàn)</a></li>
</ul>
<hr>
<div class="grid-container">
<div id="grid-items">
<a href="javascript:;">
<img src="./images/a.png">
<span class="service-txt">企業(yè)購</span>
</a>
</div>
<div id="grid-items">
<a href="javascript:;">
<img src="./images/c.png">
<span class="service-txt">禮品卡</span>
</a>
</div>
<div id="grid-items">
<a href="javascript:;">
<img src="./images/g.png">
<span class="service-txt">話費(fèi)卡</span>
</a>
</div>
<div id="grid-items">
<a href="javascript:;">
<img src="./images/d.png">
<span class="service-txt">白條卡</span>
</a>
</div>
<div id="grid-items">
<a href="javascript:;">
<img src="./images/e.png">
<span class="service-txt">游戲卡</span>
</a>
</div>
<div id="grid-items">
<a href="javascript:;">
<a href="javascript:;">
<img src="./images/f.png">
<span class="service-txt">游戲卡</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--輪播圖結(jié)束-->
<!--主體開始-->
<div class="content">
<div class="wrap">
<div class="miaosha item">京東秒殺</div>
<div class="youxuan item">特色優(yōu)選</div>
<div class="guangchang item">頻道廣場(chǎng)</div>
<div class="tuijian item">為你推薦</div>
</div>
<div class="elevator">
<a href="javascrit:">京東<br>秒殺</a>
<a href="javascript:">特色<br>優(yōu)選</a>
<a href="javascript:">頻道<br>廣場(chǎng)</a>
<a href="javascript:">為你<br>推薦</a>
</div>
</div>
<!--主體結(jié)束-->
<!--引入js文件-->
<script src="./js/index.js"></script>
</body>
</html>css
index.css
/*頭部開始*/
.header{
width:100%;
height:140px;
border-bottom:1px solid #ddd;
/* background-color:palegoldenrod; *//*黃色*/
background-color:white;
}
.wrap{
width:1190px;
margin:0 auto;
}
.header-box{
height:140px;
/* background-color:aqua; *//*藍(lán)色*/
position: relative;
}
.login{
position: absolute;
height:120px;
width:190px;
background:url("../images/sprite.png") no-repeat;
top:10px;
left:0;
/*將超出區(qū)域的內(nèi)容隱藏*/
overflow: hidden;
}
.search{
height:60px;
width:1190px;
}
.search-m{
height:60px;
width:1190px;
position: relative;
margin:0 auto;
}
.search-login{
height:40px;
width:125px;
position: absolute;
top:4px;
display:none;/*隱藏狀態(tài)，只有吸頂時(shí)出現(xiàn)*/
left:0;
background:url("../images/sprite.png") no-repeat;
background-position: 0 -120px;/*第一個(gè)值為x軸（水平）位置，第二值為y軸（垂直）位置*/
}
.form{
width:546px;
height:32px;
border:2px solid #e2231a;
position: absolute;
top:25px;
left:260px;
background:#fff;
}
.keyword{
height:25px;
width:425px;
padding:2px 44px 2px 17px;
line-height:26px;
border:2px solid transparent;/*透明色*/
font-size:12px;
color:#333;
position: absolute;
top:0;
outline: none;/*去掉文本框默認(rèn)的黑色邊框*/
}
.form button{
width:58px;
height:32px;
position: absolute;
right:0;
line-height:32px;
border:none;/*去掉按鈕默認(rèn)的邊框*/
background-color: #e1251b;
font-size:20px;
font-weight:700px;
color:white;
cursor: pointer;/*鼠標(biāo)放上去變小手*/
}
.form button:hover{
background-color:#e1251b8d ;
}
.search-helper{
width:488px;/*高度由內(nèi)容撐起*/
position: absolute;
top:35px;
border:1px solid #ccc;
overflow:hidden;/*溢出部分隱藏*/
display:none; /*隱藏狀態(tài)*/
background-color:#fff;
box-shadow: 1px 2px 1px rgb(0 0 0/20%) ;
}
.search-helper p{
font-size:12px;
height:24px;
line-height:24px;
padding:1px 6px;/*上下1像素，左右6像素*/
cursor: pointer;/*鼠標(biāo)放上去變小手*/
color:#666;
}
.search-helper p:hover{
background-color: #ccc;
}
.hotwords{
width:450px;
height:20px;
position:absolute;
top:68px;
left:260px;
line-height:20px;
}
.hotwords a{
float:left;
list-style-type: none;
height:20px;
font-size:12px;
margin-left:8px;
text-decoration: none;
color:#4f4c4c;
}
.hotwords a:hover{
color:#e1251b;
}
.navitems{
position:absolute;
width:800px;
height:60px;
top:88px;
left:220px;
}
.navitems li{
height:40px;
line-height:40px;
font-size:14px;
list-style-type: none;
float:left;
}
.navitems a{
text-decoration: none;
color:rgba(0, 0, 0, 0.848);
}
.navitems a:hover{
color:#e1251b;
}
/*頭部結(jié)束*/
body{
background-color:#f4f4f4;
}
/*輪播圖開始*/
.left{
width:220px;
height:470px;
position: absolute;
top:10px;
left:110px;
background-color:white;
}
.left li{
width:100%;
height:25px;
list-style-type: none;
margin-left:-10px;
}
.left a{
font-size:14px;
cursor: pointer;
text-decoration: none;
color:black;
}
.left a:hover{
color:red;
}
.banner{
height:470px;
width:100%;
padding-top:10px;
margin-bottom:30px;
/* background-color: coral; *//*橘黃色*/
position:relative;
}
.banner-box{
height:470px;
/* background-color:crimson; *//*紅色*/
}
.banner-slide{
width:740px;
height:470px;
/* background-color: chartreuse;/*草綠色*/
margin:0 auto;
}
.slide{
width:590px;
height:470px;
/* background-color:cyan; *//*藍(lán)色*/
position:relative;
}
.prev,.next{
position:absolute;
top:50%;
margin-top:-20px;
height:35px;
width:25px;
line-height:35px;
background-color: rgba(0,0,0,.15);
font-size:20px;
cursor:pointer;
}
.prev{
left:0;
border-radius:0 18px 18px 0;
}
.next{
right:0;
border-radius:18px 0 0 18px;
}
.slide a{
text-decoration: none;
}
.prev:hover{
background-color:#666;
}
.next:hover{
background-color: #666;
}
span:hover{/*鼠標(biāo)懸停*/
color:red;
}
span:active{/*打擊*/
color:black;
}
.banner-btn{
width:113px;
height:15px;
position: absolute;
left:30px;
bottom:20px;
}
.banner-btn li{
float:left;
width:8px;
height:8px;
list-style: none;/*不顯示列表項(xiàng)默認(rèn)的圖標(biāo)*/
margin-right:4px;
border:1px solid rgba(0,0,0,.05);
border-radius: 50%;/*圓*/
background-color:rgba(255,255,255,.4);
cursor: pointer;
}
.banner-btn .active{
border:3px solid rgba(0,0,0,.1);
background-color: rgba(255,255,255,1);
}
.right{
width:370px;
height:470px;
background-color:white;
position:absolute;
top:10px;
right:110px;
margin:0 auto;
}
.j-user{
height:102px;
margin-top:10px;
position:relative;
}
.j-userimg{
height:44px;
width:44px;
position:absolute;
top:13px;
left:80px;
}
.user-lk{
border:2px solid #fff;
border-radius: 50%;
overflow: hidden;
box-shadow:0 2px 8px rgb(0 0 0/5%);
color:#666;
text-decoration: none;
}
.user-lk,.user-lk img{
display:block;
width:40px;
height:40px;
}
.user-show{
width:106px;
height:38px;
position:absolute;
top:16px;
left:150px;
right:20px;
line-height: 20px;;
}
.user-show a{
font-size:12px;
color:#666;
text-decoration: none;
}
.user-show a:hover{
color:#e1251b;
cursor:pointer;
}
.user-profit{
width:370px;
height:25px;
margin-left: 80px;
margin-top:-10px;
}
.user-profit1 {
background-color:#e1251b;
color:white;
width:100px;
height:25px;
line-height:25px;
text-align:center;
}
.user-profit2{
height:25px;
width:100px;
line-height:25px;
text-align:center;
background: #363634;
color: #e5d790;
}
.user-profit a{
text-decoration: none;
margin-left:15px;
font-size:13px;
border-radius:13px;
font-weight: blod;
margin-top:-5px;
}
.user-profit a:hover{
color:#4a0703;
cursor:pointer;
}
.J-news{
height:129px;
width:100%;
}
.news-hd{
height:30px;
}
.news-hd h5 a{
text-decoration: none;
color:#333333b4;
}
.news-hd a:hover{
color:#c8140b;
}
.new-list{
width:320px;
height:88px;
list-style-type: none;
line-height:88px;
margin:0 auto;
position:relative;
}
.new-items{
width:320px;
height:16px;
margin-top:6px;
line-height:16px;
}
.new-items a{
text-decoration: none;
font-size:14px;
color:#666;
}
.new-items a:hover{
color:#a9120a;
}
.new-tag{
width:35px;
height:16px;
position: absolute;
top:0;
left:2px;
background-color:rgba(255, 192, 203, 0.74);
color:rgba(255, 0, 0, 0.788);
font-size:14px;
}
.new-tag1{
width:35px;
height:16px;
position:absolute;
top:22px;
left:2px;
background-color:rgba(255, 192, 203, 0.74);
color:rgba(255, 0, 0, 0.788);
font-size:14px;
}
.new-tag2{
width:35px;
height:16px;
position:absolute;
top:44px;
left:2px;
background-color:rgba(255, 192, 203, 0.74);
color:rgba(255, 0, 0, 0.788);
font-size:14px;
}
.new-tag3{
width:35px;
height:16px;
position:absolute;
top:66px;
left:2px;
background-color:rgba(255, 192, 203, 0.74);
color:rgba(255, 0, 0, 0.788);
font-size:14px;
}
.grid-container{
width:360px;
height:170px;
display:grid;
Grid-template-rows:1.5fr 1.5fr;
Grid-template-columns:1fr 1fr 1fr;
}
#grid-items{
text-align:center;
position: relative;
}
#grid-items img{
height:40px;
width:40px;
}
.service-txt{
position:absolute;
top:45px;
left:37px;
}
.grid-container a{
text-decoration: none;
color:#36363495;
}
/*輪播圖結(jié)束*/
/*主體開始*/
.content{
width:100%;
text-align:center;
position: relative;
}
.miaosha{
width:100%;
height:260px;
background-color:bisque;
margin-bottom:20px;
z-index: 10;
}
.youxuan{
height:980px;
width:100%;
background-color:chartreuse;
margin-bottom:20px;
}
.guangchang{
height:1005px;
width:100%;
background-color: cornflowerblue;
margin-bottom:20px;
}
.tuijian{
height:1870px;
width:100%;
background-color: darkolivegreen;
margin-bottom:20px;
}
.elevator{
width:58px;
height:252px;
position:absolute;
top:0;
left:50%;
margin-left:615px;
}
.elevator-fix{
position:fixed;
top:75px;
animation:eleshow 0.5s ease;
}
@keyframes eleshow {
0%{
top:0;
}
100%{
top:75px;
}
}
.elevator a{
display:block;/*讓每個(gè)a標(biāo)簽獨(dú)占一行*/
height:38px;
width:58px;
border-bottom: 2px solid #cccccc7e;
text-decoration: none;
line-height:19px;/*一行字占19像素*/
font-size:14px;
color:#333;
padding-top: 10px;
padding-bottom:10px;
transition: color 0.2s ease;
background-color: #fff;
}
.elevator a:hover{
color:white;
background-color:#e1251b;
}
/*吸頂*/
.search-fix{
position:fixed;
left:0;
top:0;
width:100%;
z-index: 10;
border-bottom:2px solid #f10214;
background-color:#fff;
box-shadow:2px 2px 2px rgb(0 0 0/20%);
animation: searchTop 0.5 ease;
}
@keyframes searchTop {
0%{
top:-50px;
}
100%{
top:0px;
}
}
/*主體結(jié)束*/js
index.js
//實(shí)現(xiàn)模糊查詢
var keyword=document.querySelector('.keyword');//獲取輸入框
var searchHelper=document.querySelector('.search-helper');//獲取搜索框下的文本框
//定義數(shù)組，存儲(chǔ)搜索的內(nèi)容
var searchArr=new Array("小米手機(jī)","華為手機(jī)","蘋果手機(jī)","小米電視","小米平板","蘋果12","蘋果13","蘋果手表");
//給輸入框綁定內(nèi)容改變事件
keyword.oninput=function(){
searchHelper.innerHtml='';
for(let i=0;i<searchArr.length;i++){
if(searchArr[i].indexOf(keyword.value)!=-1){//!=-1代表有數(shù)組中的字
searchHelper.innerHTML+='<p>'+searchArr[i]+'</p>';
searchHelper.style.display="block";//顯示搜索框下的文本框
}
}
}
//鼠標(biāo)失焦onblur
keyword.onblur=function(){
searchHelper.style.display="none";//不顯示搜索框下的文本框
}
//實(shí)現(xiàn)輪播圖的切換
var img=document.querySelector('.img');
var imgArr=['1.jpg','2.jpg','3.jpg','4.jpg','6.jpg','5.jpg','7.jpg','8.jpg'];
var count=0;
//定義一個(gè)函數(shù)，用來切換圖片的路徑
function cutImg(){
img.src='./images/'+imgArr[count];
/*設(shè)置圓點(diǎn)激活狀態(tài) */
for(let i=0;i<lis.length;i++){
//下面兩種方式都可以實(shí)現(xiàn)
// lis[i].classList.remove("active");
lis[i].className='';
}
//lis[count].classList.add("active");
lis[count].className='active';
}
//設(shè)置定時(shí)器，每隔3s切換圖片
var timer=setInterval(function(){
count++;
if(count>imgArr.length-1){//判斷是否加到最后一張圖片了
count=0;
}
cutImg();
},2000)
var next=document.querySelector('.next');
var prev=document.querySelector('.prev');
//點(diǎn)擊下一張
next.onclick=function(){
count++;
if(count>imgArr.length-1){
count=0;
}
cutImg();
}
//點(diǎn)擊上一張
prev.onclick=function(){
count--;
if(count<0){//判斷是否減到第一張圖片了
count=imgArr.length-1;
}
cutImg();
}
//鼠標(biāo)滑進(jìn)之后圖片不在切換，滑出之后圖片切換
var slide=document.querySelector('.slide');
//鼠標(biāo)滑進(jìn),將定時(shí)切換圖片給取消
slide.onmouseover=function(){
clearInterval(timer);
}
//鼠標(biāo)滑出，啟動(dòng)定時(shí)切換圖片
slide.onmouseout=function(){
timer=setInterval(function(){
count++;
if(count>imgArr.length-1){//判斷是否加到最后一張圖片了
count=0;
}
cutImg();
},2000)
}
//給所有的li綁定點(diǎn)擊事件
var lis=document.querySelectorAll('.banner-btn li');
for(let i=0;i<lis.length;i++){
lis[i].onclick=function(){
count=i;
cutImg();
}
}
//實(shí)現(xiàn)樓層elevator的定位切換
let header=document.querySelector('.header');
let banner=document.querySelector('.banner');
let elevator=document.querySelector('.elevator');
//實(shí)現(xiàn)樓層滾動(dòng)，文字變色的效果
//獲取content中的所有div
let items=document.querySelectorAll('.content .item');
//獲取所有a
let elevatorA= document.querySelectorAll('.elevator a');
let elevatorArr=[];//數(shù)組中放四個(gè)值，從頭開始到京東秒殺結(jié)束的高度，從開始到特色優(yōu)選結(jié)束的高度，從開始到頻道廣場(chǎng)結(jié)束的高度，從開始到為你推薦的高度
let base=header.offsetHeight+banner.offsetHeight;
for(let i=0;i<items.length;i++){
base=base+items[i].offsetHeight;//當(dāng)i=0時(shí)，base的值為京東秒殺的高度
elevatorArr.push(base);//將base的值放入到elevatorArr數(shù)組中
}
function clearcolor(){
for(let i=0;i<elevatorA.length;i++){
elevatorA[i].style.color='';
}
}
//獲取search的值
let search=document.querySelector('.search');
//獲取search-m的值
let searchM=document.querySelector('.search-m');
//獲取form的值
let form=document.querySelector('.form');
//獲取search-login的值
let searchLogin=document.querySelector('.search-login');
document.onscroll=function(){
//獲取滾動(dòng)條垂直方向滾動(dòng)了多少
let top= document.documentElement.scrollTop;
//document.body.scrollTop
//獲取到header的高度
//clientHeight包括其height和上下內(nèi)邊距padding.不包括其邊框;
//header.clientHeight;
//offsetHeight包括其height,上下內(nèi)邊距padding和其邊框;
let headerHeight= header.offsetHeight;
//獲取到banner的高度
let bannerHeight=banner.offsetHeight;
//當(dāng)滾動(dòng)條滾動(dòng)到一定程度時(shí),將樓層elevator的定位由絕對(duì)定位切換成固定定位
if(top>=headerHeight+bannerHeight){
// elevator.className="elevator elevator-fix";
elevator.classList.add("elevator-fix");
search.classList.add('search-fix');//當(dāng)高度達(dá)到一定高度時(shí)，出現(xiàn)吸頂效果
searchM.style.height="50px";//將search-m的高度改為50px;
form.style.top='8px';//將form距離瀏覽器上方的值改為8px;
searchLogin.style.display="block";//吸頂時(shí)，顯示小圖標(biāo)
}else{
elevator.classList.remove("elevator-fix");
search.classList.remove('search-fix');
searchM.style.height="60px";
form.style.top='25px';
searchLogin.style.display="none";
}
//實(shí)現(xiàn)樓層字體顏色的切換
//京東秒殺：亮起來
//滾動(dòng)條的高度>=header的高度+banner的高度
//滾動(dòng)條的高度<header的高度+banner的高度+京東秒殺的高度
//特色優(yōu)選：亮起來
//滾動(dòng)條的高度>=header的高度+banner的高度+京東秒殺的高度
//滾動(dòng)條的高度<header的高度+banner的高度+京東秒殺的高度+特色優(yōu)選的高度
//頻道廣場(chǎng)：亮起來
//滾動(dòng)條的高度<header的高度+banner的高度+京東秒殺的高度+特色優(yōu)選的高度
//滾動(dòng)條的高度<header的高度+banner的高度+京東秒殺的高度+特色優(yōu)選的高度+頻道廣場(chǎng)的高度
//為你推薦：亮起來
//滾動(dòng)條的高度<header的高度+banner的高度+京東秒殺的高度+特色優(yōu)選的高度+頻道廣場(chǎng)的高度
//滾動(dòng)條的高度<header的高度+banner的高度+京東秒殺的高度+特色優(yōu)選的高度+頻道廣場(chǎng)的高度+為你推薦的高度
if(top<headerHeight+bannerHeight){
clearcolor();
}else if(top>=headerHeight+bannerHeight&&top<elevatorArr[0]){
//注意不能直接使用base，因?yàn)閎ase的值已經(jīng)發(fā)生改變,這里需要用header.offsetHeight+banner.offsetHeight
clearcolor();
elevatorA[0].style.color='red';
}else if(top>=elevatorArr[0]&&top<elevatorArr[1]){
clearcolor();
elevatorA[1].style.color='red';
}else if(top>=elevatorArr[1]&&top<elevatorArr[2]){
clearcolor();
elevatorA[2].style.color='red';
}else if(top>=elevatorArr[2]){
clearcolor();
elevatorA[3].style.color='red';
}
}
效果圖如下：
? ? ?
?
?文章來源地址http://www.zghlxwxcb.cn/news/detail-504272.html文章來源：http://www.zghlxwxcb.cn/news/detail-504272.html
?
到了這里，關(guān)于web前端大作業(yè)_Html5+CSS3+JS原生項(xiàng)目_京東商城首頁 詳細(xì)代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機(jī)制——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端開發(fā)技術(shù)26（HTML5、CSS3、JavaScript ）JavaScript基礎(chǔ)——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁面設(shè)計(jì)實(shí)例——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端開發(fā)技術(shù)5.2（HTML5、CSS3、JavaScript ）CSS基礎(chǔ)，decoration，selector，properties，Cascading——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/751717-1.png)
![[HTML]Web前端開發(fā)技術(shù)6（HTML5、CSS3、JavaScript ）DIV與SPAN，盒模型，Overflow——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/756611-1.png)
![[HTML]Web前端開發(fā)技術(shù)8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
