滾動插件的使用之jQuery Marquee

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/DarinZanya/article/details/78952384

滾動插件的使用之jQuery Marquee

簡介：jQuery Marquee是一款基於 jQuery 的滾動插件，類似於 HTML 的 marquee 標籤，但在marquee的基礎上新增了許多可控功能。它可以應用於多種 Web 元素，包括文字、圖片、表單等元素，同時它可以設置不同的滾動方向（上下左右）、滾動速度、無縫滾動等等，並且支持CSS3。

• 安裝
• 使用
• 參數及配置
• 附圖

---

一、安裝

• npm安裝

  npm install jquery.marquee –save

• 直接引入
  下載地址：http://plugins.jquery.com/marquee/
  引入方式：

    <script src="../vendor/marquee/jquery.marquee.min.js">

二、使用

使用方式很簡單

Html:
    <div class="container">
        <p></p>
        <p></p>
        ...
        <!-- container容器內可爲任意標籤 -->
    </div>

JS:
    $('.container').marquee({});   //括號內爲配置參數（見下文）

三、參數及配置

常用配置：

參數	描述
direction	方向，默認爲left
duration	滾動時長（單位：毫秒），默認爲left
gap	滾動一個週期的間距（單位：px），默認爲20
delayBeforeStart	滾動開始延遲時間（單位：毫秒），默認爲1000
duplicated	無縫銜接，默認爲false
startVisible	初始位置設置，默認爲true

---

高級配置：

參數	描述
allowCss3Support	支持css3運動效果，默認爲true
pauseOnHover	鼠標移動暫停滾動，默認爲false
css3easing	css3過渡效果，默認爲linear。包含linear、swing等在內一共32種，其本質爲貝塞爾曲線（三次），詳見附圖

---

常用示例：

$(".container").marquee({
    direction: 'left',      //方向（默認爲left，下同）
    duration: 5000,         //滾動時長（單位：毫秒）
    gap: 20,                //滾動一個週期的間距（單位：px）
    delayBeforeStart: 1000, //滾動開始延遲時間（單位：毫秒）
    duplicated: false,      //無縫銜接
    startVisible: true      //初始位置設置
});

四、附圖