<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多行滚动jQuery循环新闻列表代码</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
//鼠标事件绑定
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:1,speed:500,timer:1000});
});
</script>
</head>
<body>
<p>多行滚动演示：</p>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>
相关推荐
"多行滚动jQuery循环新闻列表代码.rar" 这个标题指的是一个使用jQuery库实现的、能够展示多行新闻并进行循环滚动的代码示例。jQuery是一个广泛应用于网页开发的JavaScript库，它简化了DOM操作、事件处理、动画效果...
【标题】"多行滚动jQuery循环新闻列表特效代码"是一个基于JavaScript库jQuery实现的动态效果，主要用于展示新闻列表。在网页设计中，这样的特效能够使新闻更新更加吸引用户注意力，提高用户体验，尤其适用于新闻网站...
【标题】"js 单行多行滚动信息新闻"指的是使用JavaScript实现的一种动态展示新闻信息的效果，这种效果常见于网站的新闻更新区域，通过上下滚动或左右滑动的方式，使得多条新闻信息在有限的空间内循环展示，既节省了...
话不多说，请看代码： <!DOCTYPE ...<... <head>...多行滚动jQuery循环新闻列表代码</title> <style type
然后定义了一个`scrollNews`函数，使用`animate()`来移动新闻列表，当滚动到最右侧时，将第一个新闻项移动到列表末尾，重新设置位置，并再次调用`scrollNews`以形成循环滚动效果。 对于多行滚动，可以使用相似的...
知识点解析： 1. jQuery介绍： jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历...开发者需要有扎实的JavaScript基础和熟悉jQuery库的使用，才能有效地编写出类似多行文字图片滚动效果的代码。
jQuery滚动新闻实现是一种常见的网页动态效果，用于展示不断更新或循环播放的文本信息，如新闻标题。这个示例中，作者分享了一个基于jQuery的新闻滚动代码，并对其进行了优化。 首先，该实现涉及到以下核心文件： 1...
利用jQuery实现多行文字图片滚动效果，需要编写一定量的代码来控制滚动的实现。具体实现过程中，涉及到以下几个重要的知识点： 1. jQuery选择器的使用：通过选择器快速选中指定的DOM元素。例如`$("#scrollDiv")`...
【文字列表无缝向上滚动】是一种常见的网页动态效果，它能够为用户提供流畅的视觉体验，尤其在展示大量文本信息时，如新闻更新、公告或者产品列表等。这种效果通过编程技术实现，使得文字列表在到达顶部时不是突然...
例如，通过为新闻列表项添加特定的类（如“news-item”），并结合Bootstrap的栅格系统（如col-md-4、col-xs-12），可以对新闻内容进行合理的排版，使之在不同的显示设备上都能够获得良好的展示效果。 对于在IE浏览...
在网页设计和开发中，有时候我们需要展示大量的数据，如新闻列表、活动公告或者产品目录，这时采用表格形式是常见的选择。然而，如果数据过多，滚动浏览可能会变得繁琐。"table无限循环无缝滚动"是一个功能，它能够...
**jQuery两排图片滚动**是一种常见的网页动态效果，用于展示多张图片，通常在产品展示、广告轮播或新闻更新等场景中应用广泛。通过利用jQuery库的强大功能，开发者可以轻松实现这种滚动效果，使用户体验更加生动和...
- **示例三** 虽然没有给出具体的实现，但可以根据类似的方法进行扩展，比如使用多个`p`标签组成的列表实现多行文本的滚动。 通过这些基本的jQuery方法和定时器，我们可以创建出各种自定义的向上滚动效果，适应不同...
本文将详细介绍基于jQuery实现的各种滚动特效，包括单行滚动、多行滚动以及图文翻屏滚动效果的代码实现。这些特效在网页设计中十分常见，能够提供无间断滚动的用户体验，适用于公告板、滚动新闻、广告展示等多种场景...