html无间隔字幕滚动,js实现文字超过显示宽度每间隔1s自动向左滚动显示
html:
文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。我是一個粉刷匠,粉刷本領強,我要把那新房子刷的更漂亮
js:
var wrapper = document.getElementById('wrapper');
var inner = wrapper.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
var p_w = p.offsetWidth;
var wrapper_w = wrapper.offsetWidth;
window.οnlοad=function fun(){
if(wrapper_w > p_w){ return false;}
inner.innerHTML+=inner.innerHTML;
setTimeout("fun1()",2000);
}
function fun1(){
if(p_w > wrapper.scrollLeft){
wrapper.scrollLeft++;
setTimeout("fun1()",30);
}
else{
setTimeout("fun2()",2000);
}
}
function fun2(){
wrapper.scrollLeft=0;
fun1();
}
css代碼:
*{margin:0;padding:0;}
body{font:12px/1 '微軟雅黑';}
.wrapper{font-size:0.85rem;color:#333;padding-top:0.75rem;margin:0 0.75rem;white-space:nowrap;overflow:hidden;width:300px;}
.inner{width:1000px;overflow:hidden;}
.inner p{display:inline-block;}
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的html无间隔字幕滚动,js实现文字超过显示宽度每间隔1s自动向左滚动显示的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html类型转换函数,如何在JavaSc
- 下一篇: html input选择框样式修改,关于