<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
创建人：牛腩
创建时间：2009-1-12 11:59:55
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>多行滚动演示</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 type="text/javascript" src="/js/jquery.pack.js"></script>
<script type="text/javascript">
$.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();
}
})
$(document).ready(function() {
$("#scrollDiv").Scroll({ line: 4, speed: 500, timer: 3000 });
});
</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文字多行滚动与模块滚动** 在网页设计中，有时候我们需要展示大量文字或信息，但有限的空间使得一次性展示所有内容变得困难。这时，jQuery的文字多行滚动或模块滚动技术就能派上用场。这种技术允许我们将...
【jQuery多行滚动实现原理与方法】 在网页设计中，多行滚动是一种常见的动态效果，用于展示滚动文本或图片，通常用于新闻更新、公告显示等场景。jQuery库提供了丰富的功能和简便的API，使得实现这样的效果变得相对...
本教程将聚焦于"jquery文本单行多行滚动特效"，这是一种常见且吸引用户注意力的设计手法，常用于新闻更新、公告展示或者广告轮播。 首先，我们来详细了解一下这种特效的基本概念。文本滚动特效是指将文字或文本列表...
### Jquery多行滚动代码知识点解析 #### 1. HTML结构与CSS样式设置 首先，我们看到提供的代码中，定义了一个简单的HTML结构，其中包含一个带有滚动条的`div`容器，用于放置滚动列表。容器内包含多个`li`元素，这些...
本教程将详细讲解基于jQuery实现的"文字滚动大全"，其中包括单行滚动、多行滚动以及带按钮控制的滚动效果。 首先，我们要了解jQuery中的scroll方法。通常，scroll事件用于监听滚动条的滚动动作，但在这个特定场景下...
《jQuery实现单行多行滚动效果详解》 在网页设计中，动态滚动效果常常用于展示大量文本或数据，使得信息的呈现更为生动和吸引人。jQuery库以其强大的DOM操作和事件处理能力，成为了实现此类效果的首选工具。本文将...
【标题】"js 单行多行滚动信息新闻"指的是使用JavaScript实现的一种动态展示新闻信息的效果，这种效果常见于网站的新闻更新区域，通过上下滚动或左右滑动的方式，使得多条新闻信息在有限的空间内循环展示，既节省了...
4. **插件集成**："此开发插件可以多行滚动"表明可能有一个预封装的插件，用于简化实现多行滚动的过程。这可能是开源的，例如基于jQuery的轮播插件，或者是专门为PHPWeb定制的组件。 5. **模板调整**："templates...
jQuery库提供了简便的方法来实现这些效果，如单行滚动、批量多行滚动以及文字图片翻屏滚动。这里我们将详细讲解如何使用jQuery实现这些功能。 ### 1. 单行滚动效果 单行滚动通常用于新闻标题或者公告栏，让信息...
通过阅读文件内容并结合上述知识点解析，可以看出实现一个基于jquery的多行文字图片滚动效果需要掌握jQuery的基本操作、插件开发、动画处理、事件处理等相关知识点。开发者需要有扎实的JavaScript基础和熟悉jQuery库...
今儿分享一个jquery实现多行滚动效果。 我看一些论坛网站上面，公告处用的较多。 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0)....
"多行滚动jQuery循环新闻列表代码.rar" 这个标题指的是一个使用jQuery库实现的、能够展示多行新闻并进行循环滚动的代码示例。jQuery是一个广泛应用于网页开发的JavaScript库，它简化了DOM操作、事件处理、动画效果...
"jquery 文字滚动大全" 提供了一系列关于使用jQuery实现文字滚动效果的实例，包括单行滚动和多行滚动，它们均采用自下而上的滚动方向，为网页增加动态视觉效果，提升用户体验。 1. **文字滚动基础** - 文字滚动是...
1. **多行滚动**：textSlider能够处理多行文本，不仅限于单行展示，适合各种长度和复杂度的文本内容。 2. **自定义速度**：用户可以根据需求调整文本滚动的速度，以达到最佳的视觉效果和用户体验。 3. **方向控制**...
为了实现多行滚动，可以将图片分为不同的组，分别设置不同的滚动速度和方向，以增加层次感。 考虑到大屏幕应用，我们需要确保动画在不同分辨率和设备上都能良好运行。响应式设计是必要的，这可以通过媒体查询@media...
本文将深入探讨“textSlider多行文字滚动插件demo”，这是一个基于jQuery的JavaScript插件，专为实现多行文本的动态滚动效果而设计。这个插件能够使文本在网页上优雅地向上或向下滚动，极大地增强了用户体验，尤其...
基于jQuery的上下无缝滚动应用(单行或多行).htm