品优购综合案例——首页（JQ电梯导航栏+互斥锁问题）自学系列
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<style>
.dtlan .current {
background-color: #c81623;
color: #fff;
}
</style>
</head>
<body>
<!-- 顶部快捷导航 start -->
<div class="shortcut">
<div class="w">
<div class="short-l fl">
<ul>
<li><a href="#">品优购欢迎您！</a></li>
<li>
<a href="#">请登录 </a>
<a href="" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="short-r fr">
<ul>
<!-- 由于li内字数不一样，不要给宽度 -->
<li>
<a href="">我的订单</a>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">我的品优购</a>
<i class="icomoon1"></i>
<span class="sx">|</span>
</li>
<li>
<a href="">品优购会员</a>
<span class="sx">|</span>
</li>
<li>
<a href="">企业采购</a>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">关注品优购</a>
<i class="icomoon1"></i>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">客户服务</a>
<i class="icomoon1"></i>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">网站导航</a>
<i class="icomoon1"></i>
</li>
</ul>
</div>
</div>
</div>
<!-- 顶部快捷导航 end -->
<!-- header部分 start -->
<div class="headerwai">
<div class="w">
<div class="header">
<!-- logo模块 -->
<div class="logo">
<!-- 对logo进行优化 -->
<h1> <a href="index.html" title="品优购"><!-- 背景图片在这里 -->品优购</a></h1>
</div>
<!-- search模块 -->
<div class="search">
<input class="fl" type="text" value="请搜索.....">
<!-- input与btn1间的缝隙只能通过浮动的方式解决 -->
<button class="btn1 fl">搜索</button>
</div>
<div class="hotwrods">
<ul>
<li>
<a href="#" class="style-red">优惠购首发</a>
</li>
<li>
<a href="#">亿元优惠</a>
</li>
<li>
<a href="#">9.9元团购</a>
</li>
<li>
<a href="#">美满99减30</a>
</li>
<li>
<a href="#">办公用品</a>
</li>
<li>
<a href="#">电脑</a>
</li>
<li>
<a href="#">通信</a>
</li>
</ul>
</div>
<div class="shopcar">
<i class="shop-icon1 style-red"></i>
<span>我的购物车</span>
<i class="shop-icon2"></i>
<div class="count">888888</div>
</div>
</div>
</div>
</div>
<!-- header部分 end -->
<!--nav部分 start -->
<div class="nav">
<div class="dropdown w">
<div class="nav-left fl">
<div class="nav-left-hd">
全部商品分类
</div>
<div class="nav-left-bd" >
<ul>
<li>
<a href="">家用电器</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">手机、数码、通信</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">电脑、办公</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">家居、家具、家装、厨具</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">男装、女装、童装、内衣</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">个户化妆、清洁用品、宠物</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="list.html">鞋靴、箱包、珠宝、奢侈品</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">运动户外、钟表</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">汽车、汽车用品</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">母婴、玩具乐器</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">食品、酒类、生鲜、特产</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">医药保健</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">图书、音像、电子书</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">彩票、旅行、充值、票务</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">理财、众筹、白条、保险</a>
<i class="nav-left-li-icon1"></i>
</li>
</ul>
</div>
</div>
<div class="nav-right fl" >
<ul class="nav-ul">
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆 </a></li>
<li><a href="#">传智超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</div>
<!--nav部分 end -->
<!-- main部分 start -->
<div class="mainwai">
<div class="w">
<div class="main ">
<!-- 通过再添加一个类解决内部padding与宽度问题 -->
<div class="foucs">
<ul>
<li>
<a href="">
<img src="img/foucs_03.png" alt="">
<span class="foucs-span span1"></span>
<span class="foucs-span span2"></span>
<ul class="foucs-ul">
<!-- 结构里面不要在li中放a -->
<li class="foucs-li-frist"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</a>
</li>
</ul>
</div>
<div class="newflash">
<div class="newflash-top">
<div class="newflash-top1">
<h4>品优购快报</h4>
<span>更多</span>
<i class="newflash-icomoon"></i>
</div>
<div class="newflash-bottom1">
<ul>
<li>【特惠】 备战开学季 全民半价购数码</li>
<li>【公告】 品优稳居家电网购流程份额</li>
<li>【特惠】 百元中秋全品类礼券限量领</li>
<li>【公告】 上百元优生鲜 享阳澄湖大闸蟹</li>
<li>【特惠】 每日享折扣品优品质游</li>
</ul>
</div>
</div>
<div class="newflash-bottom2">
<ul> <!-- 注意这里的所有框都能点，意味着a与li一样大 -->
<li>
<a href="">
<span class="bottom2-icon bottom2-icon1"></span>
<span class="bottom-2-wz">话费</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon2"></span>
<span class="bottom-2-wz">机票</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon3"></span>
<span class="bottom-2-wz">电影票</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon4"></span>
<span class="bottom-2-wz">游戏</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon5"></span>
<span class="bottom-2-wz">彩票</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon6"></span>
<span class="bottom-2-wz">加油卡</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon7"></span>
<span class="bottom-2-wz">酒店</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon8"></span>
<span class="bottom-2-wz">火车票</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon9"></span>
<span class="bottom-2-wz">众筹</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon10"></span>
<span class="bottom-2-wz">理财</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon11"></span>
<span class="bottom-2-wz">礼品卡</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon12"></span>
<span class="bottom-2-wz">白条</span>
</a>
</li>
</ul>
</div>
<div class="newflash-zp">
<img src="img/main-bottom_03.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- main部分 end -->
<!-- recommend（推荐）部分 start -->
<div class="recommendwai">
<div class="w">
<div class="recommend">
<div class="recommend-hd fl">
<img src="img/clock.png" alt="">
<h4>今日推荐</h4>
</div>
<div class="recommend-bd fl">
<ul>
<li>
<a href="">
<img src="upload/recoomend1.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/recoomend2.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/recoomend3.png" alt="">
</a>
</li>
<li class="recommend-last">
<a href="">
<img src="upload/recoomend4.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- recommend（推荐）部分 end -->
<!-- 悬挂电梯栏部分 start -->
<div class="dtlan">
<ul>
<li class="current">家用电器</li>
<li>手机通讯</li>
<li>电脑办公</li>
<li>精品家具</li>
</ul>
</div>
<!-- 悬挂电梯栏部分 end -->
<!-- 猜你喜欢部分 start-->
<div class="like-wai">
<div class="w">
<div class="like">
<div class="like-hd">
<h4 class="fl">猜你喜欢部分</h4>
<div class="like-hd-right fr">
<span>
<a href="">换一批</a>
</span>
<i class="like-hd-icon1"></i>
</div>
</div>
<div class="like-bd">
<div class="ul-top">
<ul>
<li><img src="upload/1bao.png" alt=""></li>
<li><img src="upload/2guo.png" alt=""></li>
<li><img src="upload/3suo.png" alt=""></li>
<li><img src="upload/4deng.png" alt=""></li>
<li><img src="upload/5shouji.png" alt=""></li>
<li><img src="upload/6lu.png" alt=""></li>
</ul>
</div>
<div class="ul-bottom">
<ul>
<li>
<p class="ul-bottom-p">阳光美包新款单肩包女<br>
包时尚子母包四件套女</p>
<span>¥116.00</span>
</li>
<li>
<p class="ul-bottom-p">爱仕达 30CM炒锅不粘<br>
锅NWG8330E电磁炉炒</p>
<span>¥99.00</span>
</li>
<li>
<p class="ul-bottom-p">捷波朗<br>
（jabra）BOOSI劲步</p>
<span>¥245.00</span>
</li>
<li>
<p class="ul-bottom-p">欧普<br>
JYLZ08面板灯平板灯铝</p>
<span>¥238.00</span>
</li>
<li>
<p class="ul-bottom-p">三星<br>
（G5500）移动联</p>
<span>¥649.00</span>
</li>
<li class="li-last">
<p class="ul-bottom-p">韩国所望<br>
紧致湿润精华露400ml</p>
<span>¥649.00</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 猜你喜欢部分 end-->
<!-- 有趣区部分 start -->
<div class="youquwai">
<div class="w">
<div class="youqu">
<div class="like-hd">
<h4 class="fl">传智播客·有趣区</h4>
</div>
<div class="youqu-bd">
<div class="youqu-bd1 fl">
<img src="upload/interest01.png" alt="">
</div>
<div class="youqu-bd2 fl">
<div class="youqu-bd2-hd-top">
<a href="">
好东西
</a>
</div>
<div class="youqu-bd2-hd-bottom">
<img src="upload/interest02.png" alt="">
</div>
<div class="youqu-bd2-bd">
<img src="upload/interest03.png" alt="">
</div>
</div>
<div class="youqu-bd3 fl">
<div class="youqu-bd3-hd-top">
<a href="">
品牌街
</a>
</div>
<div class="youqu-bd3-hd-bottom">
<img src="upload/interest04.png" alt="">
</div>
<div class="youqu-bd3-bd">
<div class="bd3-left fl">
<img src="upload/interest05.png" alt="">
</div>
<div class="bd3-right fl">
<img src="upload/interest06.png" alt="">
</div>
</div>
</div>
<div class="youqu-bd4 fl">
<ul>
<li class="ds">
<a href="">
<img src="upload/brand01.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand02.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand03.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand13.png" alt="">
</a>
</li >
<li class="ds">
<a href="">
<img src="upload/brand04.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand05.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand06.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand07.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand08.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand09.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand10.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand11.png" alt="">
</a>
</li>
<li class="ds bd4-last2">
<a href="">
<img src="upload/brand12.png" alt="">
</a>
</li>
<li class="ss bd4-last1">
<a href="">
<img src="upload/brand13.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 有趣区部分 start -->
<!-- floor（楼梯）部分 start -->
<div class="floorwai">
<div class="w">
<div class="floor">
<div class="jiayong w">
<div class="like-hd floor-top-hd">
<h4 class="fl">家用电器</h4>
<div class="like-hd-right floor-top-hd-right fr">
<ul>
<li >
<a href="" class="red-style-a">热门</a>
<span>|</span>
</li>
<li>
<a href="">大家电</a>
<span>|</span>
</li>
<li>
<a href="">生活电器</a>
<span>|</span>
</li>
<li>
<a href="">厨房电器</a>
<span>|</span>
</li>
<li>
<a href="">个护健康</a>
<span>|</span>
</li>
<li>
<a href="">应季电器</a>
<span>|</span>
</li>
<li>
<a href="">空气/净水</a>
<span>|</span>
</li>
<li>
<a href="">新奇特</a>
<span>|</span>
</li>
<li>
<a href="">高端电器</a>
</li>
</ul>
</div>
</div>
<div class="floor-top-bd">
<div class="floor-top-bd1">
<div class="floor-top-bd1-hd">
<ul>
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
</div>
<div class="floor-top-bd1-bd">
<img src="upload/floor-1-1.png" alt="">
</div>
</div>
<div class="floor-top-bd2 ">
<img src="upload/floor-1-b01.png" alt="">
</div>
<div class="floor-top-bd3 ">
<ul>
<li class="bd3-frist">
<img src="upload/floor-1-2.png" alt="">
</li>
<li class="bd3-second">
<img src="upload/floor-1-3.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd4 ">
<ul>
<li>
<img src="upload/floor-1-4.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd5 ">
<ul>
<li class="bd5-frist">
<img src="upload/floor-1-5.png" alt="">
</li>
<li class="bd5-second">
<img src="upload/floor-1-6.png" alt="">
</li>
</ul>
</div>
</div>
<div class="floor-copyright">
<ul>
<li>
<a href="">
<img src="upload/brand_03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_05.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_07.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_09.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_11.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_13.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_15.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_17.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_19.png" alt="">
</a>
</li>
<li class="copyright-last">
<a href="">
<img src="upload/brand_21.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<div class="shouji w">
<div class="like-hd floor-top-hd floor-hd3">
<h4 class="fl">手机通讯</h4>
<div class="like-hd-right floor-top-hd-right fr">
<ul>
<li>
<a href="" class="red-style-a">热门</a>
<span>|</span>
</li>
<li>
<a href="">品质优选</a>
<span>|</span>
</li>
<li>
<a href="">新机尝鲜</a>
<span>|</span>
</li>
<li>
<a href="">高性价比</a>
<span>|</span>
</li>
<li>
<a href="">口碑推荐</a>
<span>|</span>
</li>
<li>
<a href="">合约机</a>
<span>|</span>
</li>
<li>
<a href="">手机卡</a>
<span>|</span>
</li>
<li>
<a href="">店铺精选</a>
<span>|</span>
</li>
<li>
<a href="">手机配件</a>
</li>
</ul>
</div>
</div>
<div class="floor-top-bd">
<div class="floor-top-bd1">
<div class="floor-top-bd1-hd">
<ul>
<li>手机通讯</li>
<li>依旧换新</li>
<li>双卡双待</li>
<li>自营配件</li>
<li>金属机身</li>
<li>高清屏</li>
</ul>
</div>
<div class="floor-top-bd1-bd">
<img src="upload/sjtx_12.png" alt="">
</div>
</div>
<div class="floor-top-bd2 ">
<img src="upload/sjtx_03.png" alt="">
</div>
<div class="floor-top-bd3 ">
<ul>
<li class="bd3-frist">
<img src="upload/sjtx_05.png" alt="">
</li>
<li class="bd3-second">
<img src="upload/sjtx_15.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd4 ">
<ul>
<li>
<img src="upload/sjtx_07.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd5 ">
<ul>
<li class="bd5-frist">
<img src="upload/sjtx_09.png" alt="">
</li>
<li class="bd5-second">
<img src="upload/sjtx_16.png" alt="">
</li>
</ul>
</div>
</div>
<div class="floor-copyright">
<ul>
<li>
<a href="">
<img src="upload/copyrightONE_06.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_09.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_11.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_14.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_16.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_21.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_18.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_24.png" alt="">
</a>
</li>
<li class="copyright-last">
<a href="">
<img src="upload/copyrightONE_26.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<div class="diannao w">
<div class="like-hd floor-top-hd floor-hd3">
<h4 class="fl">电脑办公</h4>
<div class="like-hd-right floor-top-hd-right fr">
<ul>
<li>
<a href="" class="red-style-a">热门</a>
<span>|</span>
</li>
<li>
<a href="">电脑/平板</a>
<span>|</span>
</li>
<li>
<a href="">潮流影音</a>
<span>|</span>
</li>
<li>
<a href="">智能/外设</a>
<span>|</span>
</li>
<li>
<a href="">DIY硬件</a>
<span>|</span>
</li>
<li>
<a href="">电竞游戏</a>
<span>|</span>
</li>
<li>
<a href="">办公/网络</a>
<span>|</span>
</li>
<li>
<a href="">文具电教</a>
<span>|</span>
</li>
<li>
<a href="">精选配件</a>
</li>
</ul>
</div>
</div>
<div class="floor-top-bd">
<div class="floor-top-bd1">
<div class="floor-top-bd1-hd">
<ul>
<li>SSD硬盘</li>
<li>显示器</li>
<li>机械键盘</li>
<li>台式机</li>
<li>组装机身</li>
<li>配件专区</li>
</ul>
</div>
<div class="floor-top-bd1-bd">
<img src="upload/dn_11.png" alt="">
</div>
</div>
<div class="floor-top-bd2 ">
<img src="upload/dn_03.png" alt="">
</div>
<div class="floor-top-bd3 ">
<ul>
<li class="bd3-frist">
<img src="upload/dn_04.png" alt="">
</li>
<li class="bd3-second">
<img src="upload/dn_15.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd4 ">
<ul>
<li>
<img src="upload/dn_06.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd5 ">
<ul>
<li class="bd5-frist">
<img src="upload/dn_08.png" alt="">
</li>
<li class="bd5-second">
<img src="upload/dn_16.png" alt="">
</li>
</ul>
</div>
</div>
<div class="floor-copyright">
<ul>
<li>
<a href="">
<img src="upload/copyrightSECOND_03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_05.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_08.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_11.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_21.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_14.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_24.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_16.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_27.png" alt="">
</a>
</li>
<li class="copyright-last">
<a href="">
<img src="upload/copyrightSECOND_18.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<div class="remen w">
<div class="like-hd floor-top-hd floor-hd3 floor-end-hd">
<h4 class="fl">热门疯抢</h4>
</div>
<div class="floor-top-end">
<div class="floor-top-end-bd1 fl">
<img src="upload/last_03.png" alt="">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥116.00</span>
</div>
<div class="floor-top-end-bd2 fl">
<ul>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_11.png" alt=""></li>
<li class="max-ol-style-one">
<p class="ul-bottom-p">羽博 7800毫安 Z <br>
3 移动电源/充电</p>
<span>¥139.00</span></li>
</ol>
</li>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_17.png" alt=""></li>
<li class="max-ol-style-second">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥128.00</span></li>
</ol>
</li>
</ul>
</div>
<div class="floor-top-end-bd2 fl">
<ul>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_08.png" alt=""></li>
<li class="max-ol-style-one">
<p class="ul-bottom-p">羽博 7800毫安 Z <br>
3 移动电源/充电</p>
<span>¥139.00</span></li>
</ol>
</li>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_17.png" alt=""></li>
<li class="max-ol-style-second">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥128.00</span></li>
</ol>
</li>
</ul>
</div>
<div class="floor-top-end-bd2 fl">
<ul>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_17.png" alt=""></li>
<li class="max-ol-style-one">
<p class="ul-bottom-p">羽博 7800毫安 Z <br>
3 移动电源/充电</p>
<span>¥139.00</span></li>
</ol>
</li>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_19.png" alt=""></li>
<li class="max-ol-style-second">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥128.00</span></li>
</ol>
</li>
</ul>
</div>
<div class="floor-top-bd5 fl">
<ul>
<li>
<img src="upload/last_05.png" alt="">
</li>
<li>
<img src="upload/last_15.png" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- floor（楼梯）部分 end -->
<!-- footer部分 start -->
<div class="last-bottom">
<div class="footer-restart" id="footer-restart">
<div class="w">
<div class="footer-top">
<ul>
<li class="footer-top-li1">
<div class="img-left img-left-icon1 fl"></div>
<div class="text-right fl">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<div class="img-left img-left-icon2 fl"></div>
<div class="text-right fl">
<h4>极速物流</h4>
<p>急速物流，极速送达</p>
</div>
</li>
<li>
<div class="img-left img-left-icon3 fl"></div>
<div class="text-right fl">
<h4>无忧售后</h4>
<p>7天无理由退还</p>
</div>
</li>
<li>
<div class="img-left img-left-icon4 fl"></div>
<div class="text-right fl">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<div class="img-left img-left-icon5 fl"></div>
<div class="text-right fl">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="footer-middle">
<ul class="max-ul">
<li class="max-li">
<h4>购物指南</h4>
<ul class="footer-middle-ul">
<li>购物流程</li>
<li>会员介绍</li>
<li>生活旅行/团购</li>
<li>常见问题</li>
<li>大家电</li>
<li>联系客服</li>
</ul>
</li>
<li class="max-li">
<h4>配送方式</h4>
<ul class="footer-middle-ul">
<li>上门自提</li>
<li>211限时达</li>
<li>配送服务查询</li>
<li>配送费收取标准</li>
<li>海外配送</li>
</ul>
</li>
<li class="max-li">
<h4>支付方式</h4>
<ul class="footer-middle-ul">
<li>货到付款</li>
<li>在线支付</li>
<li>分期付款</li>
<li>常见问题</li>
<li>邮局汇款</li>
<li>公司转账</li>
</ul>
</li>
<li class="max-li">
<h4>售后服务</h4>
<ul class="footer-middle-ul">
<li>售后政策</li>
<li>价格保护</li>
<li>退款说明</li>
<li>常见问题</li>
<li>返修/退换货</li>
<li>取消订单</li>
</ul>
</li>
<li class="max-li">
<h4>特色服务</h4>
<ul class="footer-middle-ul">
<li>夺宝岛</li>
<li>DIY装机</li>
<li>延保服务</li>
<li>品优购E卡</li>
<li>品优购通信</li>
</ul>
</li>
<li class="max-li max-li-last">
<h4>帮助中心</h4>
<div class="ewm"></div>
<p>品优购客户端</p>
</li>
</ul>
</div>
<div class="footer-end">
<!-- 不要想多了，这个版权部分就是两个p -->
<p class="end-p1">关于我们 <span class="sx2">|</span> 联系我们 <span class="sx2">|</span> 联系客服 <span class="sx2">|</span> 商家入驻 <span class="sx2">|</span> 营销中心 <span class="sx2">|</span> 手机品优购 <span class="sx2">|</span> 友情链接 <span class="sx2">|</span> 销售联盟 <span class="sx2">|</span> 品优购社区 <span class="sx2">|</span> 品优购公益 <span class="sx2">|</span> English Site <span class="sx2">|</span> Contact U</p>
<p class="end-p2">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
</div>
<!-- footer部分 end -->
</body>
</html>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
<script>
var navLefthd = document.querySelector('.nav-left-hd');
var navLeftBd = document.querySelector('.nav-left-bd');
var navLeft = document .querySelector('.nav-left')
navLefthd.onmouseover=function(){
/*在移入的前提下，分析两种情况，移入进去时整体仍存在，*/
navLeftBd.style.display='block';
navLeft.onmouseover=function(){
navLeftBd.style.display='block';
}
navLeft.onmouseout=function(){
navLeftBd.style.display='none';
}
}
navLefthd.onmouseout=function(){
navLeftBd.style.display='none';
}
</script>
互斥锁+js：
/*明确效果： >1.点击左侧电梯栏导航，定位到右侧相应的floor层
1.由于一一对应，获取导航栏的索引(不需要通过each，直接通过$(this).index()获取到)，通过索引找到对应的floor
2.为整个页面添加动画（因为移动是整个页面往下翻才有卷走的高度,动画必须是元素），卷走的高度就是刚刚获取的每个对应floor的值
>2.点击哪个导航栏li，哪个就变红
>3.电梯导航栏一开始隐藏，滑动到特定位置显示(以到推荐栏为例)
>4.反选，当页面滚动到floor的某层时（要用到页面的卷走高度，即还要在window/document的滚动事件内操作），对应电梯栏部分显示选中
1.第一，想要知道现在页面滚动在哪层了，这里不能用$（this），因为现在的this是整个页面，同时我们需要知道当前层的索引号
2.只能通过each操作找到floor的索引，并对元素操作，通过floor找电梯导航栏，为什么电梯导航栏找floor不用each呢？
因为此时的电梯导航栏索引可以通过$(this).index()获得——>即当前为电梯导航栏单击事件，可以直接通过$(选中floor).eq（$(this).index()）
找到其对应层，通过层数的offset().top即可定位到他的位置，将其赋给页面的卷走高度即可找到floor层数所在位置
*/
$(function(){
var flag//加一个互斥锁，只在点击时放行，滑动时锁死，不让他出现左侧电梯栏的背景类滑动的状况
//互斥锁如何实现的？
//1.$('.dtlan li').click(function(){})内的函数（22行）中的动画效果（scrollTop:current）有滚动的效果，
//会触发下方52行（$(window).scroll(function())效果，也就是说这个效果本不应触发，因此要杜绝这个效果的发生，怎么办呢？
//2.解决这个互斥锁问题，究其原因，是 $('.dtlan li').click(function()中animate动画的问题，我们要解决问题
//也就是解决如何在调用animate正常运行的同时，不触发下方的（$(window).scroll(function())事件
//3.因此，我们在$('.dtlan li').click(function(){})事件（22行）开始时，将其flag值设置为false，此时触发下方window scroll事件,
//我们把不应触发效果的代码段用flag==true锁起来，因为从触发到现在，flag锁一直是false，因此这段代码不会执行，多出的效果也不会触发，解决互斥锁问题
/*————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————*/
//但新问题产生，互斥锁关闭的确解决了多余效果的问题，可是根据floor层滑动找电梯导航功能彻底无效，怎么办呢？
//为什么会无效，因为从click事件开始，直到触发window.scroll最后，flag一直是flase，这部分功能一直被锁死，解开即可解决问题
//怎么解开？这时候又要回到最初，为什么用互斥锁？解决问题——————>什么问题——————>如何解决由click事件中的animate动画触发的多余window.scroll的效果
//由click事件中的animate动画开始，也由它结束，有始有终，animate为此设定了回调函数，此时我们就有方法，解决flag一直为false的问题
//animate动画中的回调函数，是动画加载完成之后调用的，这就代表着我们是在之前触发的window.scroll的问题已解决的情况下打开互斥锁
//使被锁功能实现（此时已经不影响了，因为触发的window.scroll已经结束了）
//此时，只需在回调函数中把flag的值设置为ture，再次进入window.scroll判断时，为真，重新加载效果，每次点击时都会重复此过程，出现问题————>解决问题
/* 至此，解决互斥锁问题，搞清楚了互斥锁的起因与解决过程 */
$('.dtlan li').click(function(){
flag=false
/*top 是一个属性，不是方法不加()，这句话的含义是找到 当前单击电梯栏所对应的floor楼层，并将其距离页面顶部距离赋给一个变量*/
console.log($(this).index())
/*注意这里是 .w是个类，而不是w，w是标签*/
var current = $('.floor .w').eq($(this).index()).offset().top;
console.log(current)
/*现在就已经获取到每个floor距离页面顶部的top值*/
/*整个页面的元素，（因为移动是整个页面往下翻才有卷走的高度,动画必须是元素，因此('html,body')就出现了）*/
$('html,body').stop().animate({
/* $(this).offset().top = cureent */
scrollTop:current /*将每个offset层的top赋给整个页面*/
},function(){
//动画的回调函数，即在动画加载完执行的函数，此时每一个floor层均已被找到，这里动画中floor页面一滚动，会触发页面滚动事件（47行里的滚动给/删除类）
//但是此时不需要这个动画，因此在这里面开启锁，然后在后面floor层找电梯层锁死
flag=true /*打开互斥锁，重启被锁功能*/
})
/*实现效果 >1.*/
/*实现效果 >2.*/
/* $(this).addClass('dtlan-li-first').siblings('li').removeClass('dtlan-li-first') 结构问题 */
$(this).addClass('current').siblings('li').removeClass('current')
/**/
})
/*这个事件是页面滚动事件，当滚动到一定程度触发，因此需要一个滚动事件包裹 */
/*页面滚动事件，整个过程用不到动画效果，因此可以用document，不必 $(‘html,body’) */
$(window).scroll(function(){
/* 已实现效果>3 */
scrolldhl()
/*将其效果锁死*/
if(flag){
$('.floor .w').each(function(i,DomEle){
if($(document).scrollTop()>=($(DomEle).offset().top)-60){
/* 1.index.js:48 1611.9999755620956
2.index.js:48 2125.0000488311052
3.index.js:48 2638.0000976622105
4.index.js:48 3150.999902367592 */
/*-60像素后， 1.1612
2.index.js:23 2125.0000488311052
3.index.js:51 2638.0000976622105
4.3150.999902367592
差别不大，但效果截然不同，测试后发现 $(document).scrollTop()>=($(DomEle).offset().top)-60，因为效果有了，但是差一点点像素导致不能正常给类
减去60像素进行微调，发现效果非常好，又通过-600进行测试，发现-600后有偏下了，总结可以通过其加减像素调整其依据距离顶部的位置
*/
console.log($(DomEle).offset().top)
console.log(i)/*如果可以通过卷走的高度与距离顶部值相比较，就可以得到目前所在的floor层数索引,因为索引一一对应，通过floor索引找到电梯栏索引对应层给样式*/
$('.dtlan li').eq(i).addClass('current').siblings('li').removeClass('current')
/*已经实现效果4，但前面的点击事件变红出现问题，经测试，js没有问题，就是头部少几px的问题*/
/*如果不用each，直接index可以实现么？ 发现实现不了，index*/
/* console.log($('.floor .w').eq(index())) */
/*发现问题在未给each循环前，不能直接获取到每个元素的index，因为其上方没有事件，才不能这么写*/
/* var current = $('.floor .w').eq($(this).index()).offset().top; 为什么这个可以直接用呢？因为 22行在 click 有隐式迭代 */
/* if($(document).scrollTop()>=($('.floor .w').eq(index()).offset().top)-60)
$('.dtlan li').eq($('.floor .w').index()).addClass('current').siblings('li').removeClass('current') */
}
})
/*但是发现问题，虽然能够实现效果,但如果电梯导航栏在页面刷新前未到recommend的位置（因为加了偏移量所以更靠下些）就刷新，会出现导航栏依旧显示的问题*/
/*解决问题：最好写一个函数，在页面滚动前在大的$()里就调用这个函数防止刷新bug，在滚动事件里调用显示移动显示效果，即可解决问题*/
}
})
scrolldhl()
function scrolldhl(){
if($(document).scrollTop()>=$('.recommend').offset().top)
$('.dtlan').fadeIn()
else $('.dtlan').hide()
}
})
标签：function,index,floor,JQ,li,互斥,页面,品优购 来源： https://blog.csdn.net/weixin_46972646/article/details/111998944