SMINT：单页网站的免費jQuery插件
最近为了做一个静态网页版的数据报告，不希望花很多时间去设计网页，或者花时间去调整布局，于是找到了一个名为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 原型对 ...
随机推荐
- php拓展安装
Yaf安装配置:http://www.laruence.com/manual/yaf.install.html#yaf.installation.linux 下载Yaf的最新版本, 解压缩以后, 进入 ...
- java.lang.IllegalArgumentException: Service not registered
java.lang.IllegalArgumentException: Service not registered 首先检查一下,Service是否在AndroidManifest文件中注册.格式如 ...
- 139. Word Break (String; DP)
Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...
- onsubmit return false仍提交表单
博主之前遇到这样的问题,是因为代码有错,改正之后就正常了. 但今天确定代码没错,仍然return false提交表单. 总结网上各路大神的解释: 1.onsubmit的作用是防止form只有一个inp ...
- 重哈希 · rehashing
［抄题］: ［思维问题］: ［一句话思路］: ［输入量］:空: 正常情况:特大:特小:程序里处理到的特殊情况:异常情况(不合法不合理的输入): ［画图］: newindex = (hashTable[ ...
- 实现Quartz的动态增删改查
1. Maven依赖 <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId> ...
- 41-json.decoder.JSONDecodeError: Invalid control character at: line 6894 column 12 (char 186418)
在使用python中将单词本的单词用正则匹配成字典后,以json存储,仪json读入,但是一直报错: 原因是: 正则处理后的数据有的出了点问题,导致一个字典的 有多个相同的键!!!,则肯定会报错啊!! ...
- Linux ld命令
一.简介 http://blog.sina.com.cn/s/blog_a0dc7dcf01014c5s.html 二.选项 http://blog.sina.com.cn/s/blog_a0dc7d ...
- Santa Claus and a Place in a Class
/* Santa Claus is the first who came to the Christmas Olympiad, and he is going to be the first to t ...
- Spark cache、checkpoint机制笔记
Spark学习笔记总结 03. Spark cache和checkpoint机制 1. RDD cache缓存 当持久化某个RDD后,每一个节点都将把计算的分片结果保存在内存中,并在对此RDD或衍生出 ...