最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现文字跑马灯效果
时间:2017-04-27 编辑:简简单单 来源:一聚教程网
本示例将实现文字跑马灯效果:文字超过显示宽度每间隔1s自动向左滚动显示,话不多说,请看代码
代码如下 | 复制代码 |
*{ 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;}
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.onload=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(); } |
-
上一个: JS正则表达式验证密码格式的集中情况总结
-
下一个: canvas绘制环形进度条
相关文章
- js实现文字选中分享功能 03-07
- 利用JS实现文字的聚合动画效果 03-01
- js实现文字向上轮播功能的教程 01-16
- js 闪烁的文字边框效果 05-30
- js文本框点击时文字消失,失去焦点时文字出现 05-18
- js实现文字有动画的滑过缓冲效果 01-19