JQuery单行文字滚动代码如下:
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.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(){
setInterval('AutoScroll("#callboard")',3000)
});
</script>
测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery单行文字滚动效果代码</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#callboard{height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#callboard li{height:25px;padding-left:10px;}
</style>
</head>
<body>
<div id="callboard">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.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(){
setInterval('AutoScroll("#callboard")',3000)
});
</script>
</body>
</html>
转自https://www.nixonli.com/wordpress/22300.html
声明：本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 你好！刘
本文地址：JQuery单行文字滚动效果代码
本文地址：JQuery单行文字滚动效果代码
你的灵兽看起来很好吃
6 年前 Firefox 61 Windows 7虽然不知道说的是什么，但看起来好厉害的样子！