js实现文字左右滚动

最新推荐文章于 2025-07-07 15:54:26 发布

原创最新推荐文章于 2025-07-07 15:54:26 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

57 篇文章

订阅专栏

html

<span class="jrj-red-b ml5">最新要闻：</span>
<div class="jrj-fr" style="width: 760px;position:relative;#position: absolute;#bottom:-9px;">
<div id="scgl_s1_scroll" style="overflow: hidden; width: 650px;white-space: nowrap;float: right; line-height: initial;margin-right: 59px;padding-top: 8px;#padding-top: 0px;line-height: 16px\0;">
    <table>
        <tr>
            <td id="scgl_s1_scroll1">
                <table style="width:960px;">
                    <tr>
                        <td > <span class="gray112 ml10">11:48</span>
                <span> <a href="#" style="color: rgb(0,51,153)">午间公告集锦：华西能源拟中标17.05亿元PPP项目</a>
              </span></td>
                        <td >   <span class="gray112 ml10">11:48</span>
                            <span> <a href="#" style="color: rgb(0,51,153)">*ST舜船旗下子公司融资款逾期</a></span></td>
                        <td >   <span class="gray112 ml10">11:48</span>
                            <span> <a href="#" style="color: rgb(0,51,153)">华西能源华西能源华西能源</a></span></td>
                        <td >  <span class="gray112 ml10">11:48</span>
                            <span> <a href="#" style="color: rgb(0,51,153)">华西能源华西能源华西能源</a></td>
                    </tr>
                </table>
            </td>
            <td id="scgl_s1_scroll2"></td>
        </tr>
    </table>
</div>
<div style="float: left;">
    <a href="javascript:void(0);" onmouseover="overMar(1,'scgl_s1_scroll','scgl_s1_scroll1','scgl_s1_scroll2');" onmouseout="outMar();">左滚动</a>
</div>
<div  style="float: right;position: absolute;right: 10px;">
    <a href="javascript:void(0);" onmouseover="overMar(0,'scgl_s1_scroll','scgl_s1_scroll1','scgl_s1_scroll2');" onmouseout="outMar();">右滚动</a>
</div>
</div>
js

 document.getElementById("scgl_s1_scroll2").innerHTML=document.getElementById("scgl_s1_scroll1").innerHTML;
   MyMar=setInterval(function(){MarqueeAdd("scgl_s1_scroll","scgl_s1_scroll1","scgl_s1_scroll2")},100);//自动左移动
//     MyMar=setInterval(MarqueeAdd("scgl_s1_scroll","scgl_s1_scroll1","scgl_s1_scroll2"),speed);//自动右移动


var MyMar;
//左移动
function MarqueeAdd(pareId,sonId,copyId){
    if(document.getElementById(copyId).offsetWidth-document.getElementById(pareId).scrollLeft<=0){
        document.getElementById(pareId).scrollLeft=document.getElementById(pareId).scrollLeft-document.getElementById(sonId).offsetWidth;
    }else{
        document.getElementById(pareId).scrollLeft++;
    }
}
//右移动
function MarqueeDes(pareId,sonId,copyId){
    if(document.getElementById(copyId).offsetWidth-document.getElementById(pareId).scrollLeft>=0){
        document.getElementById(pareId).scrollLeft=document.getElementById(pareId).scrollLeft+document.getElementById(sonId).offsetWidth;
    }else{
        document.getElementById(pareId).scrollLeft--;
    }
}
//鼠标画出停止
function outMar(){
    clearInterval(MyMar);
}
//鼠标滑过滚动
function overMar(jadge,pareId,sonId,copyId){
    if(jadge==0){
        MyMar=setInterval(function(){MarqueeAdd(pareId,sonId,copyId)},100); //100:速度数值越大速度越慢
    }else{
        MyMar=setInterval(function(){MarqueeDes(pareId,sonId,copyId)},50);
    }
}