一款jQuery仿京东楼层滑动侧边栏高亮的特效,有两种不同的效果:一是有侧边栏导航,而是有顶部导航条,都是随着鼠标的滚动切换不同的导航菜单和选项内容,也可以分别点击不同的导航菜单来切换内容。
页面的head部分,需设置好页面元素的样式,代码如下:
body{margin: 0;font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
.floor-nav{
height: auto;
width: 50px;
text-align: center;
position: fixed;
top: calc(50% - 250px);
left: 0;
z-index: 999;
}
.scroll-nav{
display: inline-block;
background: #fff;
width: 50px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.scroll-nav.active{ color: #000; background: yellow; font-weight: bold; }
.scroll-floor{width: 100%;height: 1000px;}
.floor1{ background-color: #CC6B6B; }
.floor2{background: lightgreen;}
.floor3{background: lightskyblue;}
.floor4{background: lawngreen;}
.floor5{background: lightcoral;}
.scroll-floor h3{ text-align:center; line-height:50px}
页面的body部分,设置好div容器里对应的内容即可,代码如下:
<h2><a href="scrollFloorWap.html">效果2</a></h2>
<nav class="floor-nav">
<span class="scroll-nav active">1楼</span>
<span class="scroll-nav">2楼</span>
<span class="scroll-nav">3楼</span>
<span class="scroll-nav">4楼</span>
<span class="scroll-nav">5楼</span>
<span class="scroll-nav">6楼</span>
<span class="scroll-nav">7楼</span>
<span class="scroll-nav">8楼</span>
<span class="scroll-nav">9楼</span>
<span class="scroll-nav">10楼</span>
</nav>
<div class="content">
<section class="scroll-floor floor1">
<h3>滚动页面查看效果</h3>
</section>
<section class="scroll-floor floor2"></section>
<section class="scroll-floor floor3"></section>
<section class="scroll-floor floor4"></section>
<section class="scroll-floor floor5"></section>
<section class="scroll-floor floor3"></section>
<section class="scroll-floor floor1"></section>
<section class="scroll-floor floor4"></section>
<section class="scroll-floor floor5"></section>
<section class="scroll-floor floor2"></section>
</div>
页面的底部,需引入jQuery库和楼层滚动插件,并启用插件设置好相应参数,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scroll.floor.js" charset="utf-8"></script>
<script type="text/javascript">
scrollFloor({
floorClass : '.scroll-floor', //楼层盒子class;默认为'.scroll-floor'
navClass : '.scroll-nav', //导航盒子class;默认为'.scroll-nav'
activeClass : 'active', //导航高亮class;默认为'active'
delayTime:100, //点击导航,滚动条滑动到该位置的时间间隔;默认为200
activeTop:200, //楼层到窗口的某个位置时,导航高亮(设置该位置);默认为100
scrollTop:0 //点击导航,楼层滑动到窗口的某位置;默认为100
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791