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



287 1147 383



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



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


热门标签: 滚动导航菜单 图片全屏 图片头像上传 二级导航菜单 滚动切换 文字全屏 文件上传 下拉导航菜单 图片滚动 360全景 文本框 竖直导航菜单 文字滚动 下拉框 图标导航菜单 复选 固定导航菜单 图片文字滚动 单选 侧边导航菜单 全屏滚动 登录框 树形导航菜单 页面滚动 注册框 网址导航菜单 搜索框 导航菜单插件 验证码 文字导航菜单 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 自动滚动图片轮播 全屏焦点图 全屏切换 切换按钮 宽屏全屏满屏 form表单 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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