最近为了做一个静态网页版的数据报告，不希望花很多时间去设计网页，或者花时间去调整布局，于是找到了一个名为Smint的免費jQuery插件。几乎不需要写什么代码就可以完成一个一页式网站。这非常适合用来制作静态网页，比如个人简历介绍，多图片的分享，广告详细内容，商品介绍，以及项目或系统的介绍等。这个插件提供了基本的界面样式和滑动式菜单，非常简洁友好，已实际使用过，现分享出来，希望更多人喜欢。

SMINT是一个为一页式网站爱好者做的简单jQuery插件，目前最新为3.0版本。
      官方网站地址：
      http://www.outyear.co.uk/smint
      Demo地址：
      http://www.outyear.co.uk/smint/demo/

SMINT有两个主要的元素，一个是带粘性的导航栏，保持在网页的顶部，当页面向下滚动时会指定到当前菜单；而当你点击菜单按钮时，页面会自动滚动到你点击的部分。

如何使用？

1、首先在网页的head部分引入javascript类库：

<head><script src="js/jquery.min.js" type="text/javascript"></script>

      <script src="js/jquery.smint.js" type="text/javascript"></script>

</head>

2、创建一个菜单，给它一个样式名称，比如：subMenu，就像下面的代码：

<div class="subMenu">

<div class="inner">

<a class="subNavBtn" href="#sTop">首页</a>

<a class="subNavBtn" href="#section1">窗体流程</a>

<a class="subNavBtn" href="#section2">签核效率</a>

<a class="subNavBtn" href="#section3">行为方式</a>

<a class="subNavBtn" href="#section4">用户群体</a>

<a class="subNavBtn" href="#section5">系统运维</a>

</div>

</div>

3、每个<a>标签的href对应到一个页面区块（section）:

<div class="section section1">

<div class="inner">

<h1>窗体流程</h1>

<img src="data:images/flow.png" />

</div>

</div>

4、在页面的script部分，加入下面的一段Javascript代码，用于初始化smint:

$(document).ready( function() {

        $('.subMenu').smint();

});

5、smint实在是我见过的最简单的插件，他只有一个可选项，那就是页面滚动速度：

$('.subMenu').smint({
   'scrollSpeed' : 1000

});

默认值是500毫秒（半秒钟），你可以修改为任何你喜欢的数值。

SMINT：单页网站的免費jQuery插件的更多相关文章

  1. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  2. jquery单页网站导航插件One Page Nav

    这是一个轻量级的jQuery的单页网站导航插件.增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项. changeHash: false, 改变当用户单击导航,就改变changeHas ...

  3. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  4. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  5. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

  6. 精品素材：WALK & RIDE 单页网站模板下载

    今天,很高兴能向大家分享一个响应式的,简约风格的 HTML5 单页网站模板.Walk & Ride 这款单页网站模板是现代风格的网页模板,简洁干净,像素完美,特别适合用于推广移动 APP 应用 ...

  7. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

  8. HTML5网站大观：15个精美的 HTML5 单页网站作品欣赏

    HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...

  9. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

随机推荐

  1. android笔记 : Content provider内容提供器

    内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能. 内容提供器的用法一般有两种,一种是使用现有的内容提供器来读取和操作相应程序中的数据,另一种是创建自己的内 ...

  2. SVN服务器端的安装和配置

    第2章 SVN 的下载与安装 服务器端的安装和配置 所有的开发人员用自己的账号登录进来就可以拥有对仓库里面的所有文件的读和写的权限 创建用户

  3. 91. Decode Ways (Array; DP)

    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...

  4. 从文件中读取字符-多次调用read characters from file multiple calls

    ［抄题］: 接口:int read4(char * buf)一次从文件中读取 4 个字符.返回值是实际读取的字符数. 例如,如果文件中只剩下 3 个字符,则返回 3.通过使用read4 接口,实现从文 ...

  5. centos7装NVIDIA显卡驱动

    一.系统及显卡 系统:centos7.5 64位 显卡:gtx 1060 前几天主要是有一个人脸识别的项目测试,需要用到显卡去测试性能,然后装显卡的过程折腾了一下,特此记录. 二.安装过程 1. 下载 ...

  6. struts2框架值栈的概述之问题一：什么是值栈？

    1. 问题一:什么是值栈? * 值栈就相当于Struts2框架的数据的中转站,向值栈存入一些数据.从值栈中获取到数据. * ValueStack 是 struts2 提供一个接口,实现类 OgnlVa ...

  7. .NET 发送邮件

    //邮件配置 public static string mail_smtp = System.Configuration.ConfigurationManager.AppSettings[" ...

  8. 局域网代理通过wget下载

    下载方法: wget -r -p -np -k http://ftp.loongnix.org/os/Fedora13-o32/RPMS/mipsel/ -r,  --recursive(递归)    ...

  9. apt-get clean 清除 apt 的缓存

    #apt-get clean 再 df -h 看看,是不是可用空间增加了几个 G ?

  10. 电商类Web原型制作分享——聚美优品

    这是一家化妆品限时特卖商城.作为美妆电商类网站的佼佼者,网站以用户体验为核心,画面主色调符合女性消费者审美.排版整齐,布局合理.网站用弹出面板实现点击弹出内容,鼠标悬停文字按钮颜色改变等交互效果. 本 ...