前台特效（5) 滚动内容

最新推荐文章于 2025-08-06 16:42:26 发布

转载最新推荐文章于 2025-08-06 16:42:26 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longdidi/archive/2013/03/12/2956331.html

文章标签：

#javascript #ViewUI

本文介绍使用纯JS和jQuery两种方式实现一个无限滚动的文字显示效果。通过复制内容实现无缝衔接，并利用定时器控制滚动速度，同时加入鼠标悬停停止和离开继续的功能。

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

js方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title> New Document </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <script type="text/javascript">
            //获取
            window.onload=function(){
                var oneDiv = document.getElementsByTagName("div")[0];
                var div1 =document.getElementById("div1");
                var div2 =document.getElementById("div2");
                div2.innerHTML=div1.innerHTML

                //定时器
                heights = oneDiv.scrollTop
                var a1a =setInterval(scrolls,150);

                function scrolls(){
                    if (oneDiv.scrollTop>=div2.offsetHeight)
                    {
                        oneDiv.scrollTop-=div1.offsetHeight
                    }
                    else{

                        oneDiv.scrollTop+=5;
                    }

                }
                //鼠标移上时清除定时器达到滚动停止的目的
                oneDiv.onmouseover=function() {clearInterval(a1a)}
                //鼠标移开时重设定时器
                oneDiv.onmouseout=function(){a1a=setInterval(scrolls,150)}

            }
        </script>

        <style type="text/css">
            #oneDiv{
                width:300px;
                height:300px;
                overflow:hidden;
                border:solid 3px #6C787B;
                text-align:center;
                background-color: #4390BA;
                color: #FEFEFE;
            }
        </style>
    </head>
    <body>
        <h1>子时过</h1>
        <div id="oneDiv">
            <div id="div1">
                <p>单骑奉月光<br/>欲观花 午时的香 <br/>却芬芳带伤 <br/>记相传 跋涉万水<br/>流连的过往<br/>怎奈作 一滴苦水<br/>在枕边流淌<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪 <br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界 <br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜 <br/>记相传 跋涉万水 <br/>流连的过往 　<br/>怎奈作 一滴苦水 <br/>在枕边流淌 　<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪<br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 　<br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界<br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜<br/></p>
            </div>
            <div id="div2">
            </div>
        </div>

    </body>
</html>

jquery方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title> New Document </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                //复制div1内容到div2
                $("#div2").html($("#div1").html());
                //定时器
                var scroll = setInterval(scrolls,150);
                //滚动函数
                function scrolls(){
                    if($("#oneDiv").scrollTop()>=$("#div2").height()){
                        $("#oneDiv").scrollTop($("#oneDiv").scrollTop()-$("#div1").height());
                    }else{
                        $("#oneDiv").scrollTop($("#oneDiv").scrollTop()+5);
                    }
                }
                //鼠标悬停停止
                $("#oneDiv").mouseover(function(){
                    clearInterval(scroll);
                });
                //鼠标离开继续
                $("#oneDiv").mouseout(function(){
                    scroll = setInterval(scrolls,150);
                });
            })
        </script>

        <style type="text/css">
            #oneDiv{
                width:300px;
                height:300px;
                overflow:hidden;
                border:solid 3px #6C787B;
                text-align:center;
                background-color: #4390BA;
                color: #FEFEFE;
            }
        </style>
    </head>
    <body>
        <h1>子时过</h1>
        <div id="oneDiv">
            <div id="div1">
                <p>单骑奉月光<br/>欲观花 午时的香 <br/>却芬芳带伤 <br/>记相传 跋涉万水<br/>流连的过往<br/>怎奈作 一滴苦水<br/>在枕边流淌<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪 <br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界 <br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜 <br/>记相传 跋涉万水 <br/>流连的过往 　<br/>怎奈作 一滴苦水 <br/>在枕边流淌 　<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪<br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 　<br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界<br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜<br/></p>
            </div>
            <div id="div2">
            </div>
        </div>

    </body>
</html>