<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery楼层效果</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script> $(function () { $(window).scroll(function () { //获取滚动条 var winH=$(window).height();//获取窗口可视区域的高度 var scrollTop=$(window).scrollTop(); if(scrollTop>=$("#header").height()){//当滚动的长度大于header的高度时，“楼梯”和“回到顶部” 淡入
$("#stairs").fadeIn(); $("#top").fadeIn();
// each() 遍历获取 找到所有的楼层 (i=索引，el=当前元素) $(".floor").each(function (i,el) { //获取每个楼层到浏览器可视区顶部的距离 var floor_top=$(el).offset().top; if(winH+scrollTop-$(this).offset().top>=winH/2){//窗口可视区域的高度+被卷上去的高度-当前元素的高度>=窗口可视区域的高度的一半 $("#stairs li").eq(i).addClass("on").siblings().removeClass("on"); } }) }else { //否则，当滚动的长度大于header的高度时，“楼梯”和“回到顶部” 淡出 $("#stairs").fadeOut(); $("#top").fadeOut(); } })
//点击变高亮 //事件委托
$("#stairs").on("click","li",function () {
$(this).addClass("on").siblings().removeClass("on"); var index=$(this).index(); // console.log(index); //点击回到对应楼层 var floor_scrolltop=$(".floor").eq(index).offset().top; //获取对应索引的楼层，距离顶部的距离 $("html,body").stop().animate({"scrollTop": floor_scrolltop},500,function () {
})
})
//回到顶部 $("#top").click(function () { $("html,body").animate({ "scrollTop":0 },500) })
})
</script> <style> *{ margin: 0px; padding:0px; } #header{ height: 200px; background-color: lightskyblue; font-size: 50px; line-height: 200px; text-align: center;
} .floor { height:1000px; color: white; font-size: 80px; line-height: 1000px; text-align: center;
} #footer{ height: 600px; color: white; font-size: 50px; line-height: 400px; text-align: center; background-color: #9c2f06; } ul{ list-style: none; z-index: 110000; position: absolute; left: 10px; top: 100px; width: 100px; border: 1px solid white; text-align: center; background-color: gray; opacity: 0.8; display: none; position: fixed;
} li{
color: white; border: 1px solid white; width: 100px; height: 60px; line-height: 50px;
} #top{ height: 40px; width: 60px; border: 1px solid black; line-height: 40px; background-color:gray; font-size: 15px; font-weight: bold; color: white; text-align: center; z-index: 200; border-radius: 5px; position: fixed; top: 900px; left: 1830px; display: none;
} #stairs li:hover span{display: block;background-color: lightpink;height: 60px} #stairs li:hover em{display: none;}
span{ display: none; }
.on{background-color: red} </style></head><body><ul id="stairs"> <li class="on"> <em>1F</em> <span>服饰</span> </li> <li> <em>2F</em> <span>美妆</span> </li> <li> <em>3F</em> <span>手机</span> </li> <li> <em>4F</em> <span>家电</span> </li> <li> <em>5F</em> <span>数码</span> </li> <li> <em>6F</em> <span>运动</span> </li> <li> <em>7F</em> <span>居家</span> </li> <li> <em>8F</em> <span>母婴</span> </li> <li> <em>9F</em> <span>食品</span> </li> <li> <em>10F</em> <span>图书</span> </li> <li> <em>11F</em> <span>服务</span> </li></ul><div id="top">goTop</div><div id="header">头部</div><div id="main"> <div class="floor" style="background-color: red">服饰</div> <div class="floor" style="background-color: orange">美妆</div> <div class="floor" style="background-color: yellow">手机</div> <div class="floor" style="background-color: lightpink">家电</div> <div class="floor" style="background-color: lightgreen">数码</div> <div class="floor" style="background-color: green">运动</div> <div class="floor" style="background-color: cyan">居家</div> <div class="floor" style="background-color: blue">母婴</div> <div class="floor" style="background-color: purple">食品</div> <div class="floor" style="background-color: lightseagreen">图书</div> <div class="floor" style="background-color: lightcoral">服务</div> <div id="footer">尾部</div></body></html>
时间： 2024-08-08 05:36:22