只记录了本人需要用到的,转载自http://www.yaosansi.com/post/1309.html
<!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>
分享到：
相关推荐
在实际应用中，你需要根据具体需求调整代码，例如添加水平滚动、控制滚动速度、添加导航箭头等。同时，为了提高性能和用户体验，需要注意优化动画效果，避免频繁的DOM操作，以及适配不同设备和浏览器的兼容性问题。 ...
1. **初始化插件**：在网页加载完成后，通过jQuery选择器找到包含图片的容器，并调用插件的初始化方法，设置相应的配置参数，如滚动速度、自动播放间隔等。 2. **响应式布局**：插件会检测设备的屏幕尺寸，并根据预...
在本文中，我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果，这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头，可以手动切换，同时具备自动轮播的功能，大大增强了用户体验。 首先，我们需要...
这个简单的jQuery图片向左滚动代码可以作为网页中动态展示图片的基础，你可以根据实际需求进行调整，例如添加过渡效果、控制按钮、自动暂停与继续等增强用户体验的功能。了解并掌握这些基础知识，对于开发具有吸引力...
根据实际需求，你可能需要调整动画速度、滚动间隔时间或容器尺寸。此外，为了提高用户体验，你还可以添加暂停和恢复滚动的交互功能，如点击按钮控制滚动。 以上就是使用jQuery实现文字上下循环滚动效果的基本步骤。...
通过jQuery对DOM元素进行操作，实现图片的左右间隔滚动。 例如，`var wraper=$(wraper);`获取外部包裹器元素，`var img=$(img).find('ul');`定位到图片的ul容器。之后，通过设置定时器和判断滚动方向，使用`....
本文将深入探讨如何利用jQuery实现滚动新闻和滚动图片，并提供相关的知识点。 一、jQuery基础 1. jQuery选择器：jQuery提供了简洁且强大的CSS选择器，如ID选择器(#id)，类选择器(.class)，元素选择器(element)，...
可能需要使用定位（position）来控制元素的显示和隐藏。 3. **jQuery加载**：在文档加载完成后，通过`$(document).ready()`函数来初始化脚本，确保所有DOM元素都已加载。 4. **选择器与变量**：使用jQuery选择器...
jQuery Scrollify是一款强大的JavaScript库，专门用于实现鼠标滚轮控制的页面滚动效果。这款插件使得网页的滚动体验更加平滑、优雅，特别是在创建单页应用（Single Page Applications）或者设计全屏滚动网站时非常...
在无缝滚动中，我们利用jQuery提供的便利方法来控制元素的显示和隐藏。 2. **CSS布局**：为了实现无缝滚动，我们需要对页面的CSS布局进行精心设计。通常，我们会创建一个容器元素，用于容纳所有要滚动的内容，然后...
4. jQuery代码：编写jQuery脚本来控制滚动效果。 ```javascript $(document).ready(function() { var scrollSpeed = 3000; // 滚动间隔时间（毫秒） var pauseScroll = false; // 是否暂停滚动的标志 var ...
在这个例子中，图片的左右切换就是通过改变图片元素的位置来实现的，通过设置CSS的`left`或`right`属性，配合时间间隔，让图片在视觉上产生平滑的移动效果。 其次，事件处理是通过`.click()`函数来绑定点击事件的。...
对于多行滚动，可以使用相似的逻辑，但需要处理行间的交错和同步问题，可能还需要使用定时器（`setInterval`）来控制滚动间隔。 在实际应用中，还可以考虑添加一些额外功能，如暂停/恢复滚动、鼠标悬停停止滚动等。...
"jQuery实现带控制按钮的图片滚动特效（可多个）"是一个常见的交互设计实践，它利用jQuery库的强大功能，为用户提供了一种流畅且可控制的图片展示方式。jQuery是一个轻量级、高性能的JavaScript库，简化了DOM操作、...
5. CSS布局：为了实现单行滚动，CSS布局（如`display: flex`或`white-space: nowrap`）可能被用来保持所有新闻标题在同一行内，同时利用CSS控制元素的初始位置和滚动方向。 6. JavaScript计时器：可能使用`...
总之，jQuery文字逐行向上滚动代码利用了jQuery库的强大功能，结合DOM操作、动画效果和定时器等技术，创建了一个动态、吸引人的网页元素。无论你是初学者还是经验丰富的开发者，理解和掌握这一技术都能提升你的前端...
**jQuery滚动效果详解** 在网页开发中，动态滚动效果是一种常见的增强用户体验的手段，它可以吸引用户的注意力并使得信息展示更加生动。本教程将详细介绍如何利用jQuery实现常见的定时滚动效果，这些效果包括但不...
在jQuery中，实现叠加效果通常会用到CSS3的`position`属性（如`relative`、`absolute`或`fixed`）、`z-index`来控制元素的堆叠顺序，以及`opacity`和`transform`属性来处理透明度和位移，以达到元素间的遮盖和展现。...
在这个代码中，jQuery用于驱动页面元素的动态滚动，通过选择器定位到相关元素，然后执行相应的动画效果，使抢购商品信息在页面上流畅地滚动展示，增强用户的视觉体验。 CSS特效在此代码中主要负责美化和优化滚动...
开发者可以利用其提供的API，如`.animate()`函数来创建平滑的过渡效果，`.slideUp()`和`.slideDown()`来控制元素的隐藏和显示，以及`.next()`和`.prev()`来实现前后切换。 【实现原理】：实现图片文字一起滚动切换...