jQuery仿京东楼层滑动侧边栏高亮

来源:https://www.sucaihuo.com/js/2791.html 2017-08-21 21:43浏览(2184) 收藏

一款jQuery仿京东楼层滑动侧边栏高亮的特效,有两种不同的效果:一是有侧边栏导航,而是有顶部导航条,都是随着鼠标的滚动切换不同的导航菜单和选项内容,也可以分别点击不同的导航菜单来切换内容。
jQuery仿京东楼层滑动侧边栏高亮
分类:导航菜单 > 滚动菜单 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2