前端常用js插件

fontAwesome 字体 已经介绍
SweetAlert 已经介绍
toastr通知 已经介绍

jquerylazyload 懒加载 已经介绍
bootstrap-switch 开关插件 已经介绍
intro.js 用户引导 已经简单介绍
jqcloud 云词 已经介绍
validate 表单验证 
layPage分页插件
supersized图片全屏
iCheck 复选框美化
fullPage.js全屏滚动
zyUpload.js 上传插件
zTree.js 树插件
fullcalendar日历插件
iscroll.js手机端滚动插件
bootstrap-datetimepicker时间插件

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

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

 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!‘);

$(function() { 
        $("img").lazyload({ 
            effect : "fadeIn", //显示效果
            threshold : 200,//看到图片之前先加载200像素
            placeholder:‘./1.jpg‘,//相当于占位符
            event:‘sporty‘,//在灰色占位图片被点击之前阻止加载图片 或者click
            //这里可以结合 定时器在5秒之后出发这个事件 $("img").trigger("sporty")

        }); 
    }); 

<!-- 最新版本的 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>

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

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

 /* 下一步按钮的显示名称 */
      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‘

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!”); } };