这篇“jquery怎么实现楼层滚动特效”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jquery怎么实现楼层滚动特效”文章吧。
效果图
html
<div id="floorNav"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></li> <li>3F<span>手机</span></li> <li>4F<span>家电</span></li> <li>5F<span>数码</span></li> <li>6F<span>运动</span></li> <li>7F<span>居家</span></li> <li>8F<span>母婴</span></li> <li>9F<span>食品</span></li> <li>10F<span>图书</span></li> <li>11F<span>服务</span></li> </ul> </div> <div id="header"></div> <div id="content"> <ul> <li >服饰</li> <li >美妆</li> <li >手机</li> <li >家电</li> <li >数码</li> <li >运动</li> <li >居家</li> <li >母婴</li> <li >食品</li> <li >图书</li> <li >服务</li> </ul></div>
css
<style type="text/css"> body, ul, li { padding: 0; margin: 0; } li { list-style: none; } #floorNav { display: none; position: fixed; top: 100px; left: 50px; width: 32px; border: 1px solid #cecece; } #floorNav li { position: relative; width: 32px; height: 32px; border-bottom: 1px solid #cecece; text-align: center; line-height: 32px; font-size: 12px; } #floorNav span { display: none; position: absolute; top: 0; left: 0; width: 32px; height: 32px; background: red; color: white; } #floorNav li:hover span, #floorNav li.hover span { display: block; cursor: default; } #floorNav li:last-child { border-bottom: none; } #header, #footer { width: 1000px; height: 1000px; background: darkgoldenrod; margin: 0 auto; } #content li { width: 1000px; height: 600px; margin: 0 auto; font-size: 40px; text-align: center; line-height: 600px; }</style>
js
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { var flag = true; $(window).scroll(function () { if (flag) { var t = $(this).scrollTop(); if (t > 500) { $("#floorNav").fadeIn(); } else { $("#floorNav").fadeOut(); } $("#content li").each(function () { if (t >= $(this).offset().top - $(this).outerHeight() / 2) { var index = $(this).index(); $("#floorNav li") .eq(index) .addClass("hover") .siblings() .removeClass("hover"); } }); } }); $("#floorNav li").click(function () { flag = false; var index = $(this).index(); $("html,body").animate( { scrollTop: $("#content li").eq(index).offset().top, }, () => { flag = true; } ); $(this).addClass("hover").siblings().removeClass("hover"); }); });</script>
以上就是关于“jquery怎么实现楼层滚动特效”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。