SMINT：單頁網站的免費jQuery插件

時間 2019-11-16

原文原文鏈接

最近爲了作一個靜態網頁版的數據報告，不但願花不少時間去設計網頁，或者花時間去調整佈局，因而找到了一個名爲Smint的免費jQuery插件。幾乎不須要寫什麼代碼就能夠完成一個一頁式網站。這很是適合用來製做靜態網頁，好比我的簡歷介紹，多圖片的分享，廣告詳細內容，商品介紹，以及項目或系統的介紹等。這個插件提供了基本的界面樣式和滑動式菜單，很是簡潔友好，已實際使用過，現分享出來，但願更多人喜歡。javascript

  SMINT是一個爲一頁式網站愛好者作的簡單jQuery插件，目前最新爲3.0版本。
  官方網站地址：
  http://www.outyear.co.uk/smint
  Demo地址：
  http://www.outyear.co.uk/smint/demo/html

SMINT有兩個主要的元素，一個是帶粘性的導航欄，保持在網頁的頂部，當頁面向下滾動時會指定到當前菜單；而當你點擊菜單按鈕時，頁面會自動滾動到你點擊的部分。java

如何使用？

一、首先在網頁的head部分引入javascript類庫：jquery

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

二、建立一個菜單，給它一個樣式名稱，好比：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>

三、每一個<a>標籤的href對應到一個頁面區塊（section）:佈局

<div class="section section1">
<div class="inner">
<h1>窗體流程</h1>
<img src="images/flow.png" />
</div>
</div>

四、在頁面的script部分，加入下面的一段Javascript代碼，用於初始化smint: 網站

$(document).ready( function() {
        $('.subMenu').smint();
});

五、smint實在是我見過的最簡單的插件，他只有一個可選項，那就是頁面滾動速度：spa

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

默認值是500毫秒（半秒鐘），你能夠修改成任何你喜歡的數值。插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。