最近为了做一个静态网页版的数据报告，不希望花很多时间去设计网页，或者花时间去调整布局，于是找到了一个名为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插件的更多相关文章
-
Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
-
jquery单页网站导航插件One Page Nav
这是一个轻量级的jQuery的单页网站导航插件.增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项. changeHash: false, 改变当用户单击导航,就改变changeHas ...
-
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
-
FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
-
你应该知道的10个奇特的 HTML5 单页网站
网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且美丽的网站. 下面是10个令人惊叹的单页 H ...
-
精品素材：WALK &; RIDE 单页网站模板下载
今天,很高兴能向大家分享一个响应式的,简约风格的 HTML5 单页网站模板.Walk & Ride 这款单页网站模板是现代风格的网页模板,简洁干净,像素完美,特别适合用于推广移动 APP 应用 ...
-
Fixed Responsive Nav – 响应式的单页网站导航插件
Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...
-
HTML5网站大观：15个精美的 HTML5 单页网站作品欣赏
HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...
-
40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
随机推荐
-
SAP验证
需求:财务录费用凭证,检查科目6601001-6601999 & 成本中心为1000R001 - 1000R999,工单不能为空 GGB0 1.选择财务凭证->行项目->新建确认' ...
-
Bzoj1001 [BeiJing2006]狼抓兔子
Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 19759 Solved: 4883 Description 现在小朋友们最喜欢的"喜羊羊与 ...
-
oracle execute immediate
declare aa ,); l_cnt ); i_yr ; i_curCode ) :='001'; i_vDate date := ...
-
Zookeeper单机版安装(CentOS 7环境下)
一.环境操作系统和软件版本介绍 1.环境操作系统为CentOS Linux release 7.2.1511 (Core) 可用cat /etc/redhat-release查询 2.软件版本 Zoo ...
-
UILabel属性小解
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
-
WOW.js 使用教程
官网加动画特效,哇哦,下面我介绍一下WOW.js 官网地址:https://www.delac.io/wow/ 点击github可以找到wow.js和wow.min.js 以及animate.css者 ...
-
PHP图像处理（GD库）
一.图像处理概述 1.开启GD2图像扩展库 ①PHP不仅限于只产生HTML的输出,还可以创建与操作多种不同格式的图像文件.PHP提供了一些内置的图像处理函数,也可以使用GD函数库创建新图像或处理已有的 ...
-
angularjs数据交互
异步问题ajax异步请求数据完数据后给$scope赋值的时候需要检查$scope的数据更新没有.要不然无法绑定数据. <!DOCTYPE html> <html ng-app=&qu ...
-
Java异常(二) 《Effective Java》中关于异常处理的几条建议
概要 本章是从<Effective Java>摘录整理出来的关于异常处理的几条建议.内容包括:第1条: 只针对不正常的情况才使用异常第2条: 对于可恢复的条件使用被检查的异常,对于程序错误 ...
-
WPF/Silverlight开发的15个最佳实践(转发)
英文出处:http://www.kunal-chowdhury.com/2010/08/some-best-practices-for-silverlight.html 作者:Kunal Chowdh ...