<!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 runat="server">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
}
#scrollDiv
{
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 1px solid;
overflow: hidden;
}
#scrollDiv li
{
height: 25px;
padding-left: 10px;
}
</style>
<script src="./jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
$(document).ready(function() {
var myar = setInterval('AutoScroll("#scrollDiv")', 1000)
$("#scrollDiv").hover(function() { clearInterval(myar); }, function() { myar = setInterval('AutoScroll("#scrollDiv")', 1000) }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
});
</script>
</head>
<body>
<div id="scrollDiv">
<ul>
<li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>
<li><a href="http://www.163.com">欢迎浏览网易</a></li>
<li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>
<li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>
<li><a href="http://www.msdn.com">msdn</a></li>
<li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
标题中的“jquery单行文字循环滚动”指的是使用jQuery库实现的一种常见的前端文本动画效果，它能使一行文字在页面上连续不断地循环滚动，常用于显示新闻标题、滚动公告等。jQuery是一个广泛使用的JavaScript库，它...
标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例，它主要用于创建一串文字在单一行内循环滚动，通常用于网站的头部或侧边栏，以动态展示最新的新闻标题或公告。 要实现这个效果，首先...
标题 "jquery单行文字循环滚动特效代码" 涉及的是使用jQuery库来实现一种文本动画效果，使得单行文字能够在页面上持续滚动展示。这种效果常见于新闻标题或者滚动公告等场景，能够吸引用户的注意力并高效利用有限的...
在网页设计中，有时我们需要在同一页面展示多组图片，并且希望这些图片能够以单行循环滚动的方式呈现，以增加页面的动态效果和视觉吸引力。"超好用的同一页面多组图片单行滚动Jquery实现代码"就是这样一个解决方案，...
以下是一个简单的逐行滚动示例： ```javascript $(document).ready(function() { var text = $('#scrolling-text').text(); var lines = text.split('\n'); // 将文本按行分割 $('#scrolling-text').text(lines...
这个例子中，`AutoScroll`函数利用了jQuery的`animate`方法来改变`#scrollDiv`中`ul`元素的`marginTop`属性，使其向上移动，然后将第一条`li`元素移动到末尾，实现循环滚动。`setInterval`函数设置了一个定时器，每1...
然后定义了一个`scrollNews`函数，使用`animate()`来移动新闻列表，当滚动到最右侧时，将第一个新闻项移动到列表末尾，重新设置位置，并再次调用`scrollNews`以形成循环滚动效果。 对于多行滚动，可以使用相似的...
当完全移出容器时，通过回调函数把中的第一个移动到末尾，再通过CSS重新设置它的位置，形成一个循环滚动的效果。 ```javascript function AutoScroll(obj) { $(obj).find("ul:first").animate({ marginTop: -div...
它能够优雅地将长段文字内容在有限的空间内循环滚动，增加网站的互动性和信息传递效率。在网页设计中，这种效果通常用于新闻滚动、公告栏或者产品介绍等区域，让信息更吸引用户注意力。 jQuery是一个广泛使用的...
1. jQuery循环滚动实例：本文档主要讲述了如何使用jQuery技术实现一个连续的循环滚动效果。该效果可以用于实现公告栏滚动、图片滚动等多种场景。实现这种滚动效果需要依赖jQuery库的支持。 2. 单行滚动：单行滚动指...
滚动结束后，回调函数将第一个li元素移动到ul的末尾，这样内容就可以不断循环滚动。 2. 多行滚动效果： 多行滚动效果类似于单行滚动，不过它可以实现多行内容同时滚动，适用于展示更丰富的信息。这种效果可以在同一...
3. 循环滚动的实现：通过`animate()`函数实现滚动效果，其中`marginTop`用于控制滚动的垂直位置。 4. 动画参数的自定义：通过扩展jQuery的fn对象，可以定义一个Scroll方法，这样就可以为所有jQuery对象添加滚动效果...
6. **无限循环**：为了实现无限滚动的效果，需要在容器滚动到最左边或最右边时调整内部卡片的顺序，使得第一个卡片移动到最后，最后一个卡片移动到前面，这样用户在点击左右箭头时就不会看到空白区域。 7. **优化**...
- 循环滚动：当文字滚动到一定位置时，需要将其“重置”回初始位置，以实现无缝效果。 6. 动画库和框架：除了手动编写JavaScript代码，还可以利用现有的动画库（如jQuery的animate方法）或前端框架（如React、Vue...