文字无限无缝滚动效果——和派孔明

最新推荐文章于 2025-01-08 16:23:14 发布

原创最新推荐文章于 2025-01-08 16:23:14 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM #无限运动 #无缝运动

DOM&BOM操作同时被 3 个专栏收录

64 篇文章

订阅专栏

Java全栈之路

55 篇文章

订阅专栏

常用特效

24 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的文字无限无缝滚动效果。通过设置特定的CSS样式和使用jQuery库来控制滚动行为，使得列表中的文字能够平滑地滚动显示。

文字无限无缝滚动效果——和派孔明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:100px;height:20px;margin:0 auto;overflow:hidden;}
#div1 li{width:100px;height:20px;line-height: 20px;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function() {
    var oDiv = $("#div1");
    var timer = null;
    oDiv.mouseover(function() {
        clearInterval(timer);
    }).mouseout(function() {
        timer = setInterval(function() {
            scroll(oDiv);
        },2000);
    }).trigger("mouseout");
});

function scroll(obj) {
    var oLi = obj.find("ul:first");
    var lineHeight = oLi.find("li:first").height();
    oLi.animate({
        "margin-top": -lineHeight + "px"
    },
    500,
    function() {
       oLi.css({
            "margin-top": "0px"
        }).find("li:first").appendTo(oLi);
    })
}
</script>
</head>
<body>
    <div id="div1">
        <ul>
            <li><a href="javascript:;">111111111111</a></li>
            <li><a href="javascript:;">222222222222</a></li>
            <li><a href="javascript:;">333333333333</a></li>
            <li><a href="javascript:;">444444444444</a></li>
            <li><a href="javascript:;">555555555555</a></li>
        </ul>
    </div>
</body>
</html>