js 插件用法解析總結

插件解析


咱們理解您須要更便捷更高效的工具記錄思想,整理筆記、知識,並將其中承載的價值傳播給他人,Cmd Markdown 是咱們給出的答案 —— 咱們爲記錄思想和分享知識提供更專業的工具。 您能夠使用 Cmd Markdown:javascript

  • Placeholdem插件
  • wow.min.js插件
  • jquery.sticky.js插件

1. Placeholdem插件解析

1.1 功能說明

  • Placeholdem is a JavaScript plugin that animates placeholder carets on inputs and textareas. The placeholder value will incrementally delete on focus, and restore on blur.

1.1 使用方法

第一步:引用 JS 文件
第二步:在input和textarea中設置placeholder屬性

第三步:Placeholdem(document.querySelectorAll('[placeholder]'));
複製代碼

2. wow.min.js插件解析

2.1 功能說明

  • 在頁面向下滾動的時候,觸發對應的動畫效果。依賴animate.css,支持animate.css的各類動畫效果。

2.2 使用方法

第一步:引入
    <link rel="stylesheet" href="css/animate.min.css">
    <script type="text/javascript" src="wow.min.js"></script>
第二步:data-wow-duration(動畫持續時間)和data-wow-delay(動畫延遲時間)
    <div class="wow slideInLeft" data-wow-duration="2000ms" data-wow-delay="5000ms"></div>

第三步:執行代碼
    new WOW().init();
複製代碼

3. jquery.sticky.js

2.1 功能說明

  • Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.
  • 當導航欄不位於頂部,可是滑動以後若想導航欄一直位於頂部,能夠使用該方法

2.2 使用方法

第一步:引入
    <script src="jquery.js"></script>
    <script src="jquery.sticky.js"></script>

第二步:執行代碼
    $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0});
      });

複製代碼

2.3 參數解析

參數名稱 解析
topSpacing default 0
bottomSpacing default 0
相關文章
相關標籤/搜索