文字滚动特效

标签：on()   app   wrap   element   滚动   color   append   span   div   

<style>
#Marquee{
height:20px;overflow:hidden;
display:inline-block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;
}
#Marquee p{
height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#888;
}
</style>
<div style="padding:10px;font-size:13px">
<div style="width:100%;background:#fff;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;border-radius:5px;-webkit-border-radius:5px;padding:10px 0">
<span style="display:inline-block;width:80px;text-align:center"><img src="/images/szsq/tt.png" style="display:block;margin:0 auto;width:70px;margin-top:-3px"></span>
<span id="Marquee"><p>今日数字社区“白皮书”各级领区</p></span>
<span style="display:inline-block;width:30px;text-align:center"><img src="/images/szsq/huomiao.png" style="display:block;margin:0 auto;width:15px;margin-top:-3px"></span>
</div>
</div>
<script>
var Mar = document.getElementById("Marquee");
var child_div=Mar.getElementsByTagName("p")
var picH = 20;//移动高度
var scrollstep=2;//移动步幅,越大越快
var scrolltime=80;//移动频度(毫秒)越大越慢
var stoptime=2000;//间断时间(毫秒)
var tmpH = 0;
Mar.innerHTML += Mar.innerHTML;
function start(){
if(tmpH < picH){
tmpH += scrollstep;
if(tmpH > picH )tmpH = picH ;
Mar.scrollTop = tmpH;
setTimeout(start,scrolltime);
}else{
tmpH = 0;
Mar.appendChild(child_div[0]);
Mar.scrollTop = 0;
setTimeout(start,stoptime);
}
}
$(document).ready(function(){
setTimeout(start,stoptime);
});
</script>

文字滚动特效

标签：on()   app   wrap   element   滚动   color   append   span   div   

原文地址：https://www.cnblogs.com/hxlj130520/p/13619426.html