文字滚动水平方向

css:

*{margin: 0;padding: 0;}
.yhq_318_text{width: 900px;height: 50px;background:rgba(255,233,188,1);border-radius:25px;margin-top: 23px;font-size: 16px;}
.scroll li span{color: #725535;list-style: none;line-height: 50px;margin-left: 30px;}
.scroll li b{color: #F36B2F;font-weight: normal;}
.d1{width:700px;height:auto;overflow:hidden;white-space:nowrap;margin-left: 28px;float: left;}
.div2 {width:auto;height:auto;float:left;overflow:hidden;}
.yhq_318_L{float: left;margin-left: 24px;margin-top: 10px;display: block;width:2px;height:31px;background:rgba(114,85,53,1);}
.yhq_318_hdjl{font-size:16px;color:rgba(243,107,47,1);line-height: 50px;margin-left: 24px;cursor: pointer;}

html:

<div class="yhq_318_text" >
	<div class="d1" id="div1" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval(mar,30)">
		<div class="scroll" id="scroll">
			<div class="div2" id="div2">
				<ul class="scroll">
					<li>
						<span>恭喜**兑换了<b>2.00</b>美金优惠券</span>
						<span>恭喜**兑换了<b>4.00</b>美金优惠券</span>
						<span>恭喜**兑换了<b>6.00</b>美金优惠券</span>
						<span>恭喜**兑换了<b>8.00</b>美金优惠券</span>
						<span>恭喜**兑换了<b>10.00</b>美金优惠券</span>	
					</li>
				</ul>
			</div>
			<div id="div3" class="div2"></div>
		</div>
	</div>		
	<span class="yhq_318_L"></span>
	<span class="yhq_318_hdjl">活动币记录>></span>
</div>

js:

<script language="javascript" type="text/javascript">
    var s,s2,s3,s4,timer;
    function init(){
        s=getid("div1");
        s2=getid("div2");
        s3=getid("div3");
        s4=getid("scroll");
        s4.style.width=(s2.offsetWidth*2+100)+"px";
        s3.innerHTML=s2.innerHTML;
        timer=setInterval(mar,30)
    }
    function mar(){
        if(s2.offsetWidth<=s.scrollLeft){
            s.scrollLeft-=s2.offsetWidth;
        }else{s.scrollLeft++;}
    }
    function getid(id){
        return document.getElementById(id);
    }
    window.init;
</script>