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 原型对 ...
随机推荐
- 将2020年交期的PR回写出来了
OUT_pr表中的交期为2020年和2019年,不应该 回写的PR却回写出来了 优化如下:
- ubuntu连有线网 无法连接外网
问题:连上网线后,有ip,但是无法访问外网. 我的解决方案是: .通过命令行ifconfig命令查看以太网(即网线插口)的名称,如下图,'enp3s0'是网线插口(Ethernet以太网): zhum ...
- CentOS 安装 Docker CE
准备工作 系统要求 Docker CE 支持 64 位版本 CentOS 7,并且要求内核版本不低于 3.10. CentOS 7 满足最低内核的要求,但由于内核版本比较低,部分功能(如 overla ...
- php中错误处理机制
php中,异常处理机制是有限的,无法自动抛出异常,必须手动进行,并且内置异常有限. php把许多异常看作错误,这样就可以把这些异常想错误一样用set_error_handler接管,进而主动抛出异常. ...
- Spring框架整合WEB解决配置文件加载多次的问题
1. 创建JavaWEB项目,引入Spring的开发包.编写具体的类和方法. * 环境搭建好后,启动服务器来测试项目,发送每访问一次都会加载一次配置文件,这样效率会非常非常慢!! 2. 解决上面的问题 ...
- Sql优化-必劳记！
0. 尝试在合适的场景下,用 Charindex()函数代替 like,或者全文索引进行 内容搜寻.%like%不走索引,'like%'后百分号可以走索引. 1.调整不良SQL通常可以从以下几点切入: ...
- 【转】MEF程序设计指南一：在应用程序中宿主MEF
在应用程序中宿主MEF其实非常简单,只需要创建一个组合容器对象(CompositionContainer)的实例,然后将需要组合的部件(Parts)和当前宿主程序添加到容器中即可.首先需要添加MEF框 ...
- C&C++内存布局
1. Memory Layout of a C Program http://codingfreak.blogspot.com/2012/03/memory-layout-of-c-program-p ...
- DICOM
DICOM(Digital Imaging and Communications in Medicine)即医学数字成像和通信,是医学图像和相关信息的国际标准(ISO 12052).它定义了质量能满足 ...
- 深入浅出 JMS(四) - ActiveMQ 消息存储
深入浅出 JMS(四) - ActiveMQ 消息存储 一.消息的存储方式 ActiveMQ 支持 JMS 规范中的持久化消息与非持久化消息 持久化消息通常用于不管是否消费者在线,它们都会保证消息会被 ...