jquery浮動固定層導航菜單點擊導航標簽滾屏切換頁面(支持鼠標滾屏切換)



111 440 147



特效描述:浮動固定層 導航菜單 導航標簽滾屏 切換頁面 鼠標滾屏切換,成功,失敗,錯誤,遮罩等實例

代碼結構

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

加群請備注:從官網了解到

老夫子电子