jQuery实现简单的间隔向上滚动效果

这篇文章主要介绍了jQuery实现简单的间隔向上滚动效果,实例分析了jQuery通过animate与setInterval控制dom元素滚动特效的技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现简单的间隔向上滚动效果的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:

<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.4.4.min.js"></script>
<div>
 <div><strong>间隔滚动效果：</strong></div>
 <div>
     <ul>
  <li><a href="#" target="_blank">aaaaaa</a></li>
  <li><a href="#" target="_blank">bbbbbb</a></li>
  <li><a href="#" target="_blank">cccccc</a></li>
  <li><a href="#" target="_blank">dddddd</a></li>
  <li><a href="#" target="_blank">eeeeee</a></li>
     </ul>
 </div>
</div>
<script type="text/javascript">
function AutoScroll(obj) {
 $(obj).find("ul:first").animate({
 marginTop: "-22px"
 }, 500, function() {
 $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
 });
 }
 $(document).ready(function() {
 setInterval('AutoScroll("#demo")', 1000)
 });
</script>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章: