首页

关于

创建具有固定导航功能的滑动单页面布局网站

创建具有固定导航功能的滑动单页面布局网站

在线演示    在线下载

建立简单网页时,倾向于将内容放在同一布局中,而非多个页面。这类单页面网站非常适用于在线展示一个小型项目或者作品集。如果把内容分割为几个整洁的部分,那么访问者可以使用滑动导航以便快速浏览页面。

本教程展示如何利用jQuery建立典型的滑动导航,有多种可替代的插件都可以实现同样的功能,并且很省时。但我们这次只使用了jQuery,然后用scrollTo插件优化了性能。点击下面的链接查看在线动画演示吧。

Demo与源代码 下载 

入手

首先下载jQuery的本地副本,并与其他脚本文件放在一起。还需要 jQuery.scrollTo插件副本,它是一个单一的.js文件。我创建了两个替换文件index.html styles.css,用于存放页面架构。我们首先来分析主要的内容。

<!doctype html>
<html lang="en-US">
<head>

标签: 导航功能, 页面布局, javascript, 滑动页面, jquery

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.