前端經常使用js插件

目前知道的插件有如下 下面有一部分我仍是使用過的，但還有一部分是蒐集資料瞭解到的 後邊還會持續更新 後邊我也會將這些插件的整合和所有的插件的例子放在我的github上面 歡迎star

fontAwesome 字體 已經介紹
SweetAlert 已經介紹
toastr通知 已經介紹

jquerylazyload 懶加載 已經介紹
bootstrap-switch 開關插件 已經介紹
intro.js 用戶引導 已經簡單介紹
jqcloud 雲詞 已經介紹
validate 表單驗證 
layPage分頁插件
supersized圖片全屏
iCheck 複選框美化
fullPage.js全屏滾動
zyUpload.js 上傳插件
zTree.js 樹插件
fullcalendar日曆插件
iscroll.js手機端滾動插件
bootstrap-datetimepicker時間插件

fontAwesome 字體
官方地址 http://fontawesome.dashgame.com/
使用cdn  
國內建議使用<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
國外建議使用 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
簡單使用

<i class="fa fa-area-chart"></i>

效果

 

 

 

 

SweetAlert
官方地址 https://sweetalert.bootcss.com/
使用cdn

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

簡單使用 在底部javascript裏邊添加下面的腳本

swal({
        title : "支付成功",
        type : "success",
        confirmButtonText : "肯定",
        closeOnConfirm : false
    });

效果（更多參數能夠查看官方文檔） 推薦一個博客這裏對於這個插件的使用講解的很好 https://www.cnblogs.com/lvxisha/p/9791931.html

 

 

 

toastr 通知
cdn
樣式連接 <link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
腳本連接 <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
基本參數

 toastr.options = {  
        closeButton: false,  
        debug: false,  
        progressBar: true,  
        positionClass: "toast-top-center",  
        onclick: null,  
        showDuration: "300",  
        hideDuration: "1000",  
        timeOut: "2000",  
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  
        hideMethod: "fadeOut" ,
        newestOnTop: true,
        preventDuplicates: true,
        preventOpenDuplicates: true,
        maxOpened:1 
    };

 

簡單的使用

toastr.success('Hello world!', 'Toastr fun!');

效果

 

 

 

 

 

 

 

jquerylazyload 圖片懶加載

cdn js連接
https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js jquery庫鏈接

簡單使用

$(function() { 
        $("img").lazyload({ 
            effect : "fadeIn", //顯示效果
            threshold : 200,//看到圖片以前先加載200像素
            placeholder:'./1.jpg',//至關於佔位符
            event:'sporty',//在灰色佔位圖片被點擊以前阻止加載圖片 或者click
            //這裏能夠結合 定時器在5秒以後出發這個事件 $("img").trigger("sporty")

        }); 
    }); 

 

bootstrap-switch 開關插件
官方地址
http://www.bootcss.com/p/bootstrap-switch/ 
cdn

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!--必須引入-->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>

html

<input type="checkbox" name="test">

js

 $("[name='test']").bootstrapSwitch()

效果

 

 

 

 

用戶引導 intro.js

 用於向首頁使用網站或者移動應用添加漂亮的分佈指南效果

須要的文件

intro.js

introjs.css

參數說明

 /* 下一步按鈕的顯示名稱 */
      nextLabel: 'Next →',
      /* 上一步按鈕的顯示名稱 */
      prevLabel: '← Back',
      /* 跳過按鈕的顯示名稱 */
      skipLabel: 'Skip',
      /* 結束按鈕的顯示名稱 */
      doneLabel: 'Done',
      /* 引導說明框相對高亮說明區域的位置 */
      tooltipPosition: 'bottom',
      /* 引導說明文本框的樣式 */
      tooltipClass: '',
      /* 說明高亮區域的樣式 */
      highlightClass: '',
      /* 是否使用鍵盤Esc退出 */
      exitOnEsc: true,
      /* 是否容許點擊空白處退出 */
      exitOnOverlayClick: true,
      /* 是否顯示說明的數據步驟*/
      showStepNumbers: true,
      /* 是否容許鍵盤來操做 */
      keyboardNavigation: true,
      /* 是否按鍵來操做 */
      showButtons: true,
      /* 是否使用點點點顯示進度 */
      showBullets: true,
      /* 是否顯示進度條 */
      showProgress: false,
      /* 是否滑動到高亮的區域 */
      scrollToElement: true,
      /* 遮罩層的透明度 */
      overlayOpacity: 0.8,
      /* 當位置選擇自動的時候，位置排列的優先級 */
      positionPrecedence: ["bottom", "top", "right", "left"],
      /* 是否禁止與元素的相互關聯 */
      disableInteraction: false,
      /* 默認提示位置 */
      hintPosition: 'top-middle',
      /* 默認提示內容 */
      hintButtonLabel: 'Got it'

未完

 

 

 

jqcloud 雲標籤

cdn

https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js

<link href="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>

 

簡單使用

var arr = ['算法','java','web前端','php服務端','linux'];

function createobj(){
    var rst = {};
    var i = Math.ceil(Math.random(0,5)*10);
    console.log(i);
    rst.text = arr[i];
    rst.weight = Math.floor(Math.random(2,10)*10);
    return rst;
}
var test = [];
for(var i=0;i<30;i++){
    test.push(createobj());
    if(test.length == 30){
        $("#cloud").jQCloud(test, {
        removeOverflowing: true,
        shape: "elliptic",
        height: 200
    });
    }
}

參數

html : 設置html屬性，如 obj.html = {class: "customclass", title: "A title"};

link : 設置連接，如 obj.link = {"http://blog.wange21.top"};

afterWordRender:設置這個詞在渲染後調用的函數。
handlers : 一個指定將綁定到單詞的事件處理程序的對象，如 obj.handlers = {click: function() { alert(「it works!」); } };