卡卡网

几段文字循环间歇向下或向上滚动，这是很常见的特效，我们可以通过jQuery轻松地实现它。

效果如图

 
文字向下滚动

demodownload

 
文字向上滚动

demodownload

示例介绍

本示例由jQuery实现。

• 有几段文字内容，它们循环并且间歇地向上，或者向下滚动。
• 当鼠标停放到文字区域时，停止滚动。

HTML代码

<div class="scrolltext">
  <div id="quotation">
    <ul>
      <li>
        <p>1、jquery图片大小尺寸调整插件，自适应容器图片垂直居中,自定义图片大小尺寸宽度和高度...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滚动</a><span>2012-07-10</span></p>
      </li>
      <li>
        <p>2、jquery jCoverflip图片插件制作图片水平滑动展示，依次放大缩小图片缩放翻转展...</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图片放大插件制作一个当鼠标滑过图片，图片按等比例缩放放大效果...</p>
        <p class="a-r"><a href="#" class="stress">jquery文字滚动</a><span>2012-07-09</span></p>
      </li>
    </ul>
  </div>
</div>

代码结构有两个div和一个ul组成，最外层div的class属性值为scrolltext，内层div的id属性值为quotation，ul容器里li是需要滚动的文字内容，一个li代表一段文字。

jQuery代码

下面是本文示例文字向下滚动的jQuery实现代码。

首先需要引用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() 第二个参数值500，这个是动画运动时间，这里表示文字滚动的时间为0.5秒。

$ul.animate() 第三个参数值3000，这个是动画延迟时间，这里表示文字滚动的间歇时间为3秒。

fadeIn(500) 表示文字淡入用时为0.5秒。

trigger("mouseleave") 表示鼠标移开时触发动画，当鼠标移到文字上时停止动画。

CSS

CSS代码很少。

overflow:hidden; 定义div文字溢出时隐藏。

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

padding-bottom:35px; 该属性值35在示例jQuery编程里有用到，它是设置一个元素的底部填充(空格)，即是底部间隙。注意： 负值是不允许的。默认值： 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;}

总结

本文介绍了jQuery实现几段文字循环间歇地向下或向上滚动的方法，这个效果比较常见，喜欢的朋友可直接下载源码备用。

相关文章

• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文简繁体转换【演示-源码下载】
• jQuery find("#id")与find(".class")实例分析与比较
• JQuery计算HTML元素子元素(child elements)
• 鼠标点击输入框时高亮显示边框颜色【jquery和css实现】
• JQuery使用append()函数动态创建和应用CSS样式
• JQuery获取/添加/删除HTML控件的CSS类名(class name)
• $.ajax() data{} 传参三种常见写法及ajax()方法参数详解
• 表单序列化插件serializeJSON.js下载及使用示例
• JQuery如何把JSON字符串转为JSON对象

标签: 文字滚动  JQuery