jquery浮动固定层导航菜单点击导航标签滚屏切换页面(支持鼠标滚屏切换)



105 418 140



特效描述:浮动固定层 导航菜单 导航标签滚屏 切换页面 鼠标滚屏切换,成功,失败,错误,遮罩等实例

代码结构

1. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style:none;}
body{color:#333;font:14px/150% "Microsoft YaHei", Arial,"宋体",sans-serif;text-align:center;background:#DCDCDC;}
img{border:0;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;}
html{ overflow-x:hidden;overflow-y:hidden;_background-image:url(about:blank);_background-attachment:fixed;}/* html加上这段代码用于取消ie6滚动时候元素震动bug */
/* content */
#content{position:relative;z-index:0;}
.article{background:#04caca;text-align:left;}
.article dt{width:60%;padding-top:50px;margin:0 auto;font:normal 40px/200% "Microsoft YaHei";color:#fff;text-shadow:1px 1px 1px #666;}
.article dt em{font:italic 80px/150% Verdana;margin-right:10px;}
.article dd{position:relative;z-index:1;width:60%;margin:20px auto 0 auto;}
.article dd .con{position:relative;z-index:1;padding:30px;font:normal 16px/200% "Microsoft YaHei";color:#fff;}
.article dd .con p{text-indent:24px;margin-bottom:20px;}
#art2{background:#7eb906;}
#art3{background:#d68432;}
#art4{background:#aa89d8;}
.sideGuide{position:fixed;_position:absolute;z-index:1;left:50px;top:150px;width:150px;background:#fff;_top:expression(eval(document.documentElement.scrollTop+150))}
.sideGuide h3{height:40px;line-height:40px;background:#f50;font-weight:bold;color:#fff;}
.sideGuide ul{padding:10px 0;}
.sideGuide li{height:32px;line-height:32px;position:relative;border-bottom:1px solid #f4f4f4;vertical-align:middle;}
.sideGuide li s{display:none;position:absolute;top:0;left:-10px;width:10px;background:#555;height:32px;}
.sideGuide li a{display:block;color:#999;}
.sideGuide li a:hover{text-decoration:none;color:#f50;}
.sideGuide li.on s{display:block;}
.sideGuide li.on a{background:#f4f4f4;color:#333;}
</style>
<div id="content">
	<dl id="art1" class="article">
		<dt><em>01</em>作者声明</dt>
		<dd>
			<div class="con">
				<p>jquery纵向定位滚屏特效代码,是个人业余兴趣爱好写的,是基于jquery一个特效,没有任何封装,只是提供一种思考方式和实现方法,代码共享可随便使用,可能存在bug,但本人不承担任何修复bug的责任。</p>
			</div>
		</dd>	
	</dl>
	<dl id="art2" class="article">
		<dt><em>02</em>电影新闻</dt>
		<dd>
			<div class="con">
				<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p>
				<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p>
				<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p>
			</div>
		</dd>	
	</dl>
	<dl id="art3" class="article">
		<dt><em>03</em>人物新闻</dt>
		<dd>
			<div class="con">
				<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p>
				<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p>
				<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p>
			</div>
		</dd>
	</dl>
	<dl id="art4" class="article">
		<dt><em>04</em>电视新闻</dt>
		<dd>
			<div class="con">
				<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p>
				<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p>
				<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p>
			</div>
		</dd>
	</dl>
	<div class="sideGuide">
		<h3>导航</h3>
		<ul>
			<li class="on"><a href="javascript:void(0)">作者声明</a><s></s></li>
			<li><a href="javascript:void(0)">电影新闻</a><s></s></li>
			<li><a href="javascript:void(0)">人物新闻</a><s></s></li>
			<li><a href="javascript:void(0)">电视新闻</a><s></s></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
(function($){
	var goTo = $(".article");
	var guide = $(".sideGuide");
	var guideLi = $(".sideGuide li");
	var index=0;
	var direct=0; 
	//设置宽高
	var resetFun = function(){ goTo.each(function(){  $(this).height( $(window).height() ) }); }
	resetFun();
	//屏幕滚动
	var goToFun = function(){ 
		direct=0; 
		if(index<0){ index=0; return }
		if(index>=guideLi.size()){ index=guideLi.size()-1; return }
		$("html,body").stop().animate({ scrollTop:$(window).height()*index },300,"swing",function(){direct=0; }); guideLi.removeClass("on").eq(index).addClass("on");  
	}
	guideLi.each(function(i){ $(this).click(function(){  index=guideLi.index( $(this) ); goToFun(); }) });
	$(window).resize(function(){ resetFun() });
	/* 滚轮事件 */ 
	var scrollFunc=function(e){ 
		e=e || window.event; 
		if(e.wheelDelta){ direct+= (-e.wheelDelta/120); }else if(e.detail){ direct+=e.detail/3 ; } 
		if( direct>=8 ){ goToFun( index++ ) }
		if( direct<=-8 ){ goToFun( index-- ) }
	} 
	if( document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }
	 window.onmousewheel=document.onmousewheel=scrollFunc; 
})(jQuery);
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 导航切换 菜单切换 浮动菜单 浮动导航 收缩菜单 收缩导航 右键菜单 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 滚动切换 滚动条切换 滑动选项卡 滑动切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 文字切换 文字选项卡 侧边菜单 侧边导航

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到