SOURCE

var speed=40;//数值越大，速度越慢
var demo2=document.getElementById("scrollist2");
var demo1=document.getElementById("scrollist1");
var demo=document.getElementById("scrollist");

demo2.innerHTML=demo1.innerHTML;

demo.scrollTop=demo.scrollHeight;

function MarqueeUp(){
if(demo2.offsetTop-demo.scrollTop<=0)
    {demo.scrollTop-=demo2.offsetHeight;}
else{
demo.scrollTop++;
    }
}
var MyMar=setInterval(MarqueeUp,speed);
demo.onmouseover=function(){clearInterval(MyMar);}
demo.onmouseout=function(){MyMar=setInterval(MarqueeUp,speed);}

<div id="scrollist" class="mesglist"> 
      <div id="scrollist1" class="clearfix">
          <!-- 下面是你要显示的内容 --> 
          <ul class="half-part margin">
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
              <li><span>869110×××</span><span>获得超级大礼包</span></li>
          </ul>

          <!-- 显示的内容结束！ -->
      </div>           
      <div id="scrollist2" class="clearfix">
      </div>
 </div>

*{margin:0;padding:0;}
body{ font:12px/1.5 "\5FAE\8F6F\96C5\9ED1","arial","\5b8b\4f53","tahoma"; color: #333; }
a{ text-decoration: none;}
a:hover{ text-decoration: underline;}
ul,li{list-style: none;}
img,input,button,select{outline:none;border:0 none;}
.clearfix:after{ content:" "; display:block; clear:both; visibility:hidden; height:0; line-height:0; }
.clearfix{ *zoom:1; }

.mesglist{ width:600px; height:160px; padding-left: 12px; margin: 16px auto 12px;font-size: 14px; overflow: hidden; position: relative;}/*注意！滚动框外层容器要定义：position: relative*/
.half-part{ width:45%; float: left;}
.margin{ margin-right:7%}
.half-part li{ width: 100%;}
.half-part li span{ width:49.5%; display: inline-block;}