js不间断滚动的简单实现
更新时间:2016年06月03日 16:51:51 投稿:jingxian
下面小编就为大家带来一篇js不间断滚动的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
CSS:
ul, li {
margin: 0;
padding: 0;
}
#scrollDiv {
width: 300px;
height: 25px;
line-height: 25px;
border-bottom: #4c8cd1 1px solid;
overflow: hidden;
}
#scrollDiv li {
height: 25px;
padding-left: 10px;
}
JS:
<script>
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 800, function () {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
$(document).ready(function () {
setInterval('AutoScroll("#scrollDiv")', 3000)
setInterval('AutoScroll("#scrollDiv")', 3000)
});
</script>
HTML:
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
以上这篇js不间断滚动的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
这篇文章主要介绍了JS实现iframe编辑器光标位置插入内容的方法,可实现文本与图片的插入功能,并兼容IE和Firefox浏览器,需要的朋友可以参考下2016-06-06
JavaScript通过mouseover()实现图片变大效果的示例
下面小编就为大家分享一篇JavaScript通过mouseover()实现图片变大效果的示例,具有很好的参考价值,希望对大家有所帮助2017-12-12


最新评论