類似上述的效果：
上代碼：
HTML：
<div class="wrp">
<div class="wrpBg"></div>
<div class="wrpTitle">
<p>
<span class="item1 item">狀態(tài)</span>
<span class="item2 item">訂單號(hào)</span>
<span class="item3 item">產(chǎn)品名稱</span>
<span class="item4 item">數(shù)量</span>
<span class="item5 item">價(jià)格</span>
<span class="item6 item">日期</span>
</p>
</div>
<div class="scroll" id="scroll">
<div id="inner1">
<p>
<span class="item1 item">【訂單】</span>
<span class="item2 item">12321321321</span>
<span class="item3 item">多撒多撒多撒多撒多撒多大大</span>
<span class="item4 item">1</span>
<span class="item5 item">32.26</span>
<span class="item6 item">2016-11-21</span>
</p>
</div>
</div>
</div>
</div>
注意： 直接遍歷p元素就行了第练；
js：
function srcoll(){
var _scroll = document.getElementById("scroll"),
_inner1 = document.getElementById("inner1"),
speed = 20;
function marquee(){
if(_inner1.offsetHeight<=_scroll.scrollTop){
_scroll.scrollTop = 0
}else{
_scroll.scrollTop++;
}
}
var interval = setInterval(marquee,speed);
_scroll.onmouseover = function(){
clearInterval(interval);
}
_scroll.onmouseout = function(){
interval = setInterval(marquee,speed);
}
}
srcoll();
css：
.wrp {
position: absolute;
left: 20px;
bottom: 20px;
}
.wrp .wrpBg{
position: absolute;
/left: 20px;
bottom: 20px;/
height: 100%;
width: 100%;
background-color: #2B2F40;
opacity: .5;
}
.wrp .wrpTitle{
padding: 10px 0;
}
.wrp .wrpTitle span{
font-weight: bold;
}
.wrp .scroll{
line-height:20px;
/border:2px dashed #666;/
height:200px;
overflow:hidden;
}
.wrp .item{
padding: 5px 0;
text-align: center;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrp .item1{
width: 100px;
}
.wrp .item2{
width: 200px;
}
.wrp .item3{
width: 250px;
}
.wrp .item4{
width: 100px;
}
.wrp .item5{
width: 50px;
}
.wrp .item6{
width: 150px;
}
