日期:2013-9-17 来源:GBin1.com
建立简单网页时,倾向于将内容放在同一布局中,而非多个页面。这类单页面网站非常适用于在线展示一个小型项目或者作品集。如果把内容分割为几个整洁的部分,那么访问者可以使用滑动导航以便快速浏览页面。
本教程展示如何利用jQuery建立典型的滑动导航,有多种可替代的插件都可以实现同样的功能,并且很省时。但我们这次只使用了jQuery,然后用scrollTo插件优化了性能。点击下面的链接查看在线动画演示吧。
入手
首先下载jQuery的本地副本,并与其他脚本文件放在一起。还需要jQuery.scrollTo插件副本,它是一个单一的.js文件。我创建了两个替换文件index.html和styles.css,用于存放页面架构。我们首先来分析主要的内容。
<!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Single Page Sliding Layout - Design Shack Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.scrollTo.js"></script> </head>
头文件的内容应该简明扼要,不要繁琐复杂。索引文件使用HTML5文档类型,还有我们下载的样式表以及两个JS文件。显然还有其他可替代的来自定义滚动效果,但是在本教程中直接运用了插件就简单许多了。在页面HTML中我们可以看到如何设置导航。
<div id="w"> <div id="content"> <nav id="stickynav"> <ul id="nav" class="clearfix"> <li><a href="#topbar">Homepage</a></li> <li><a href="#about">About</a></li> <li><a href="#photos">Photos</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> ........
结语
简单网页不需要复杂的菜单系统,利用本文介绍的技术可以帮助组织网页内容。我希望本教程能够帮助开发者创建简单的页面布局。jQuery是可扩展的,且很容易被扩展这个代码库到你自己的jQuery插件中。欢迎下载我的源代码,将这个效果运用到以后的作品中。
via极客标签
相关推荐
jQuery左侧固定导航栏点击滑动对应页面,一般我们在我们的企业网站或者商城网站都会有在线客服,一般使用qq的形式来展示,或者以网页的形式,一般企业网站在导航栏就会直接显示联系我们!php中文网推荐下载!
jQuery固定导航随页面滚动颜色渐变
左侧固定菜单是2014年最流行的网页布局之一。这款css3左侧导航固定页面无限滚动布局模板左侧菜单大小固定,主体内容区域可以无限向下滚动,效果类似于jQuery之家的首页的左侧导航栏。
bootstrap-vertical-menu是一款基于Bootstrap的CSS3响应式滑动侧边栏布局模板。该滑动侧边栏布局在大屏幕中以侧边栏的形式存在,在小屏幕设备中,菜单会被移动到屏幕的底部,只显示菜单的图标。
Android可滑动的SwipeLayout布局
滑动导航栏+滚动页面,配合ViewPager使用的Indicator,支持ViewPager Scroll时Indicator联动
并实例利用ViewPager,PagerAdapter和OnPageChangeListener实现圆点导航左右滑动效果,并实现了被滑动界面处理控件事件,同时通过Fragment实现两个页面切换效果
可滑动导航栏
nav导航tab栏左右滑动 , 点击前后自动滑动到可视区域 , 很简单的一个插件 , 根据左右宽度可自己修改成body上下滑动联动导航左右滑动
本文主要介绍了flex布局实现上下固定中间滑动的布局方式,分享给大家,具体如下: 例如这样的一个页面,希望有个头图,有个底部的底栏,中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部,中间部分可滑动...
1.刚进入界面外层布局,自动下滑一段距离,露出内层布局。 2.外层布局可以上下滑动,并且带有透明度渐变效果,改变内边距效果。
是一款非常好用的单页面滑动页面哦,使用简单的js特效
jq实现的固定滑动导航,效果还可以,喜欢的朋友可以下载
jquery mobile固定底部左右滑动
jquery右侧边固定层导航菜单依次动画滑动显示菜单展开
滑动时切换页面,同时页面显示导航点进行导航,实现联动与导航效果
协调者布局滑动
导航栏滚动到页面顶部后,固定,并处于所有的页面元素上方,浮动显示。
RecyclerView滑动固定/悬停/折叠分组列表标题,NestScrollView折叠布局,解决和RecyclerView的滑动冲突, 自定义View(柱状直方图、金融收益图、无线轮播图、带Icon的TabView),WebView预加载,主流首页框架的多种...
WAP手机页面导航三区块滑动效果 WAP手机页面导航三区块滑动效果