jQuery右側固定圖標導航控制頁面全屏滾動代碼



221 883 295



特效描述:jQuery 右側固定圖標導航 控制頁面 全屏滾動,jQuery頁面全屏滾動,右側固定層的圖標導航點擊控制頁面全屏滾動效果代碼。(不兼容IE6,7,8)

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/modernizr.js"></script>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script>

3. HTML代碼

<nav class="cd-vertical-nav">
	<ul>
		<li><a href="#section1" class="active"><span class="label">5iweb</span></a></li>
		<li><a href="#section2"><span class="label">HTML5</span></a></li>
		<li><a href="#section3"><span class="label">CSS3</span></a></li>
		<li><a href="#section4"><span class="label">SVG</span></a></li>
	</ul>
</nav><!-- .cd-vertical-nav -->
<section id="section1" class="cd-section">
	<div class="content-wrapper">
		<h1>網頁特效</h1>
		<a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a>
	</div>
</section><!-- cd-section -->
<section id="section2" class="cd-section">
	<div class="content-wrapper">
		<h2>HTML5</h2>
		<p>HTML5草案的前身名為 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接納,并成立了新的 HTML 工作團隊。</p>
	</div>
</section><!-- cd-section -->
<section id="section3" class="cd-section">
	<div class="content-wrapper">
		<h2>CSS3</h2>
		<p>CSS即層疊樣式表(Cascading StyleSheet)。 在網頁制作時采用層疊樣式表技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。</p>
	</div>
</section><!-- cd-section -->
<section id="section4" class="cd-section">
	<div class="content-wrapper">
		<h2>SVG</h2>
		<p>可縮放矢量圖形是基于可擴展標記語言(標準通用標記語言的子集),用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定,是一個開放標準。</p>
	</div>
</section><!-- cd-section -->
<script src="js/main.js"></script> <!-- Resource jQuery -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 收縮菜單 收縮導航 右鍵菜單 導航切換 菜單切換 浮動菜單 浮動導航 滑動導航菜單 滑動導航 滑動菜單 flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 滾動導航菜單 滾動菜單 滾動導航 自動滾動圖片輪播 全屏焦點圖 全屏切換 切換按鈕 寬屏全屏 寬屏 全屏 頁面全屏 頁面寬屏 表單 表單美化 表單插件 表單美化插件 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 滾動導航菜單 滾動菜單 滾動導航 圖片全屏 滾動切換 滾動條切換 圖標導航 圖標菜單 側邊菜單 側邊導航 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子