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 原型对 ...
随机推荐
- Java ReentrantLock和synchronized两种锁定机制的对比
多线程和并发性并不是什么新内容,但是 Java 语言设计中的创新之一就是,它是第一个直接把跨平台线程模型和正规的内存模型集成到语言中的主流语言.核心类库包含一个 Thread 类,可以用它来构建.启动 ...
- linux系统分区表修复
有些时候在系统突然断电或硬盘只读后在看机会出现报错,开机到不了登录界面,而是来到一个提示: Give root password for maintenance(or type Control-d t ...
- Plants vs. Zombies（二分好题+思维）
Plants vs. Zombies http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5819 BaoBao and DreamG ...
- 运行php网站需要安装什么
php的运行环境: 为了能够运行php,有以下两种方法: 1. 使用支持php和MySQL的web主机(): 2. 本机(自己电脑)安装web服务器,然后安装MySQL和php. web虚拟主机: 大 ...
- 使用生活实例理解Asp.net运行时
学习编程语言,掌握面向对象的编程思想尤为重要,一旦理解了面向对象的这种概念,那么好些地方拿到生活中去理解,就容易的多了.书本上的枯燥干涩的语言,对于好多人来说,即难懂,更难长时间牢牢记得.但是编程语言 ...
- MongoDB的基本shell操作（三）
mongodb_server_ Installer.bat @echo offecho 正在安装服务MongoDB...start cmd /k "cd/d C:\Program Files ...
- 25-删除m位数是剩下的最大
/* 寻找最大数 题目内容: 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大,比如当n=92081346 ...
- CentOS设置yum存储库 （nginx）
要为RHEL / CentOS设置yum存储库,请创建/etc/yum.repos.d/nginx.repo 使用以下内容命名的文件 : [nginx] name=nginx repo baseurl ...
- js this pointer 指针
this JavaScript的函数内部如果调用了this,那么这个this到底指向谁? 答案是,视情况而定! 如果以对象的方法形式调用,比如xiaoming.age(),该函数的this指向被调用的 ...
- webstorm使用教程
Webstorm 超实用配置教程 原文来自:http://www.jianshu.com/p/4ce97b360c13 一.下载安装包 Webstorm 2017.1.4 百度云盘下载地址:https ...