js实现文字左右滚动

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);" οnmοuseοver="overMar(1,'scgl_s1_scroll','scgl_s1_scroll1','scgl_s1_scroll2');" οnmοuseοut="outMar();">左滚动</a>
</div>
<div  style="float: right;position: absolute;right: 10px;">
    <a href="javascript:void(0);" οnmοuseοver="overMar(0,'scgl_s1_scroll','scgl_s1_scroll1','scgl_s1_scroll2');" οnmοuseοut="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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值