jquery新闻上下滚动超简洁

最新推荐文章于 2020-05-13 11:43:53 发布

ke0971

最新推荐文章于 2020-05-13 11:43:53 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： jquery

HTML 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的页面元素自动滚动效果。通过定时调整ul元素的外边距顶部值来达到视觉上的滚动效果，并在每次滚动结束后将第一个列表项移至末尾，以循环展示列表内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.jq22.com/webqd74

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="Generator" content="EditPlus&reg;" /> 
  <meta name="Author" content="" /> 
  <meta name="Keywords" content="" /> 
  <meta name="Description" content="" /> 
  <title>Document</title> 
  <style type="text/css">
    li{ list-style-type: none; }
  </style> 
  <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> 
 </head> 
 <body> 
  <div id="broadcast" class="bar" name="giftactive"> 
   <div style="float:left">
    <strong>间隔滚动效果：</strong>
   </div> 
   <div id="demo" style="overflow:hidden;height:22px;line-height:22px;"> 
    <ul class="mingdan" id="holder"> 
     <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>   
 </body>
</html>