jQuery右侧固定图标导航控制页面全屏滚动代码



216 861 288



特效描述: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

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