js实现文字左右滚动

来源：互联网发布：留学新加坡的利弊知乎编辑：程序博客网时间：2024/05/21 05:36
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);    }}
1 0