jquery实现文字上下循环无缝滚动效果
Posted 马克斯先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现文字上下循环无缝滚动效果相关的知识，希望对你有一定的参考价值。
单行滚动
<!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=utf-8" />
<title>单行滚动</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="news" style="background-color: pink;height: 2.8rem;overflow:hidden;line-height: 45px;">
<ul style="margin-top:0!important">
<li>
<a href="#">1我是第一条</a>
</li>
<li>
<a href="#">2我是第二条</a>
</li>
<li>
<a href="#">3我是第三条</a>
</li>
<li>
<a href="#">4我是第一条</a>
</li>
<li>
<a href="#">5我是第四条</a>
</li>
<li>
<a href="#">6我是第五条</a>
</li>
</ul>
</div>
<script language="javascript">
function autoScroll(obj)
$(obj).find('ul').animate(
marginTop: '-2.8rem'
,1000,function()
$(this).css(marginTop : "0px");
var li =$("ul").children().first().clone()
$("ul li:last").after(li );
$("ul li:first").remove();
)
$(function()
setInterval('autoScroll("#news")',2000);
console.log(666);
)
</script>
</body>
</html>
多行滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝多行向上滚动</title>
<style>
*margin:0;padding:0;font-size:12px;list-style: none;
.boxmargin:20px;
width:320px;
height:195px;
border:1px solid #ddd;
padding:10px;
overflow:hidden;
box-sizing: border-box;
.boxul
padding: 10px;
.box ul li
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height:25px;
</style>
<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<ul>
<li>01、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>02、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>03、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>04、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>05、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>06、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>07、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>08、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>09、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>10、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
</ul>
</div>
<script>
(function($)
$.fn.scrollTop = function(options)
var defaults =
speed: 30
var opts = $.extend(defaults, options);
this.each(function()
var $timer;
var scroll_top = 0;
var obj = $(this);
var $height = obj.find("ul").height();
obj.find("ul").clone().appendTo(obj);
obj.hover(function()
clearInterval($timer);
, function()
$timer = setInterval(function()
scroll_top++;
if (scroll_top > $height)
scroll_top = 0;
obj.find("ul").first().css("margin-top", -scroll_top);
, opts.speed);
).trigger("mouseleave");
)
)(jQuery)
</script>
<script>
$(function()
$(".box").scrollTop(
speed: 30 //数值越大 速度越慢
);
)
</script>
</body>
</html>
以上是关于jquery实现文字上下循环无缝滚动效果的主要内容，如果未能解决你的问题，请参考以下文章
让table表头固定，tr超出指定条数后无缝上下循环滚动jquery效果代码