无缝滚动

最新推荐文章于 2025-06-11 12:51:21 发布

玩酷青春PAKOUR

最新推荐文章于 2025-06-11 12:51:21 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html效果

本文链接：https://blog.youkuaiyun.com/weixin_36261398/article/details/53161891

html 专栏收录该内容

2 篇文章

订阅专栏

js代码

$(function() {
    var $this = $(".renav");
    var scrollTimer;
    $this.hover(function() {
        clearInterval(scrollTimer);
    },
    function() {
        scrollTimer = setInterval(function() {
            scrollNews($this);
        },
        2000);
    }).trigger("mouseout");
});
function scrollNews(obj) {
    var $self = obj.find("ul:first");
    var lineHeight = $self.find("li:first").height();
    $self.animate({
        "margin-top": -lineHeight + "px"
    },
    600,
    function() {
        $self.css({
            "margin-top": "0px"
        }).find("li:first").appendTo($self);
    })
}

html代码

<html>
 <head>
  <style type="text/css"> 
.renav{ 
width:200px; 
height:150px; 
line-height:21px; 
overflow:hidden; 
background:#FFFFFF; 
} 
.renav li{ 
height:21px; 
} 
</style> 
 </head>
 <body>
  <div class="renav"> 
   <ul style="margin-top: 0px;"> 
    <li><a>罗氏</a></li> 
    <li><a>瑞声达</a></li> 
    <li><a>未添加1</a></li> 
    <li><a>未添加2</a></li> 
    <li><a>未添加3</a></li> 
    <li><a>未添加4</a></li> 
    <li><a>西门子</a></li> 
    <li><a>欧姆龙</a></li> 
   </ul> 
  </div> 
 </body>
</html>