卡卡網(wǎng)

幾段文字循環(huán)間歇向下或向上滾動，這是很常見的特效，我們可以通過jQuery輕松地實現(xiàn)它。

效果如圖

 
文字向下滾動

demodownload

 
文字向上滾動

demodownload

示例介紹

本示例由jQuery實現(xiàn)。

• 有幾段文字內(nèi)容，它們循環(huán)并且間歇地向上，或者向下滾動。
• 當(dāng)鼠標(biāo)停放到文字區(qū)域時，停止?jié)L動。

HTML代碼

<div class="scrolltext">
  <div id="quotation">
    <ul>
      <li>
        <p>1、jquery圖片大小尺寸調(diào)整插件，自適應(yīng)容器圖片垂直居中,自定義圖片大小尺寸寬度和高度...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滾動</a><span>2012-07-10</span></p>
      </li>
      <li>
        <p>2、jquery jCoverflip圖片插件制作圖片水平滑動展示，依次放大縮小圖片縮放翻轉(zhuǎn)展...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滾動</a><span>2012-07-09</span></p>
      </li>
      <li>
        <p>3、jquery圖片插件制作圖片等比列縮放層疊樣式，圖片疊加展示。點擊層疊最上層...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滾動</a><span>2012-07-10</span></p>
      </li>
      <li>
        <p>4、jquery圖片放大插件制作一個當(dāng)鼠標(biāo)滑過圖片，圖片按等比例縮放放大效果...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滾動</a><span>2012-07-09</span></p>
      </li>
    </ul>
  </div>
</div>

代碼結(jié)構(gòu)有兩個div和一個ul組成，最外層div的class屬性值為scrolltext，內(nèi)層div的id屬性值為quotation，ul容器里li是需要滾動的文字內(nèi)容，一個li代表一段文字。

jQuery代碼

下面是本文示例文字向下滾動的jQuery實現(xiàn)代碼。

首先需要引用jquery庫文件。

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
  $(function() {
    var scrtime;
    $("#quotation").hover(function() {
      clearInterval(scrtime);
    }, function() {
      scrtime = setInterval(function() {
        var $ul = $("#quotation ul");
        var liHeight = $ul.find("li:last").height();
        $ul.animate({
          marginTop: liHeight + 35 + "px"
        }, 500, function() {
          $ul.find("li:last").prependTo($ul);
          $ul.find("li:first").hide();
          $ul.css({
            marginTop: 0
          });
          $ul.find("li:first").fadeIn(500);
        });
      }, 3000);
    }).trigger("mouseleave");
  });
</script>

$ul.animate() 第二個參數(shù)值500，這個是動畫運動時間，這里表示文字滾動的時間為0.5秒。

$ul.animate() 第三個參數(shù)值3000，這個是動畫延遲時間，這里表示文字滾動的間歇時間為3秒。

fadeIn(500) 表示文字淡入用時為0.5秒。

trigger("mouseleave") 表示鼠標(biāo)移開時觸發(fā)動畫，當(dāng)鼠標(biāo)移到文字上時停止動畫。

CSS

CSS代碼很少。

overflow:hidden; 定義div文字溢出時隱藏。

line-height:28px; 定義文字行高。

padding-bottom:35px; 該屬性值35在示例jQuery編程里有用到，它是設(shè)置一個元素的底部填充(空格)，即是底部間隙。注意： 負值是不允許的。默認值： 0。

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Lucida,Verdana,"宋體",Helvetica,sans-serif;color:#333;background:#fff;}
.scrolltext{width:230px;height:287px;overflow:hidden;background:url(bg.png) no-repeat;}
/* quotation */
#quotation{width:190px;height:227px;overflow:hidden;margin:44px auto 0 auto;}
#quotation li{line-height:28px;padding-bottom:35px;}
#quotation li .a-r{text-align:right;}
#quotation li span{color:#999;margin:0 0 0 10px;}

總結(jié)

本文介紹了jQuery實現(xiàn)幾段文字循環(huán)間歇地向下或向上滾動的方法，這個效果比較常見，喜歡的朋友可直接下載源碼備用。

相關(guān)文章

• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文簡繁體轉(zhuǎn)換【演示-源碼下載】
• jQuery find("#id")與find(".class")實例分析與比較
• JQuery計算HTML元素子元素(child elements)
• 鼠標(biāo)點擊輸入框時高亮顯示邊框顏色【jquery和css實現(xiàn)】
• JQuery使用append()函數(shù)動態(tài)創(chuàng)建和應(yīng)用CSS樣式
• JQuery獲取/添加/刪除HTML控件的CSS類名(class name)
• $.ajax() data{} 傳參三種常見寫法及ajax()方法參數(shù)詳解
• 表單序列化插件serializeJSON.js下載及使用示例
• JQuery如何把JSON字符串轉(zhuǎn)為JSON對象

標(biāo)簽: 文字滾動  JQuery