卡卡網(wǎng)

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

效果如圖

 
文字向下滾動(dòng)

demodownload

 
文字向上滾動(dòng)

demodownload

示例介紹

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

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

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文字滾動(dòng)</a><span>2012-07-10</span></p>
      </li>
      <li>
        <p>2、jquery jCoverflip圖片插件制作圖片水平滑動(dòng)展示，依次放大縮小圖片縮放翻轉(zhuǎn)展...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滾動(dòng)</a><span>2012-07-09</span></p>
      </li>
      <li>
        <p>3、jquery圖片插件制作圖片等比列縮放層疊樣式，圖片疊加展示。點(diǎn)擊層疊最上層...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滾動(dòng)</a><span>2012-07-10</span></p>
      </li>
      <li>
        <p>4、jquery圖片放大插件制作一個(gè)當(dāng)鼠標(biāo)滑過(guò)圖片，圖片按等比例縮放放大效果...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滾動(dòng)</a><span>2012-07-09</span></p>
      </li>
    </ul>
  </div>
</div>

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

jQuery代碼

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

首先需要引用jquery庫(kù)文件。

<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() 第二個(gè)參數(shù)值500，這個(gè)是動(dòng)畫(huà)運(yùn)動(dòng)時(shí)間，這里表示文字滾動(dòng)的時(shí)間為0.5秒。

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

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

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

CSS

CSS代碼很少。

overflow:hidden; 定義div文字溢出時(shí)隱藏。

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

padding-bottom:35px; 該屬性值35在示例jQuery編程里有用到，它是設(shè)置一個(gè)元素的底部填充(空格)，即是底部間隙。注意： 負(fù)值是不允許的。默認(rèn)值： 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實(shí)現(xiàn)幾段文字循環(huán)間歇地向下或向上滾動(dòng)的方法，這個(gè)效果比較常見(jiàn)，喜歡的朋友可直接下載源碼備用。

相關(guān)文章

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

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