本文实例讲述了 JS 实现的文字间歇循环滚动效果分享给大家供大家参考, 具体如下:
先来看看运行效果:
具体代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>www.jb51.net - 间歇循环滚动 </title>
- <style>
- #box{
- height:240px;
- width:300px;
- margin:0 auto;
- border:1px solid #0066FF;
- overflow:hidden;
- padding-bottom:20px;
- }
- #box li{
- color:#333;
- height:24px;
- }
- #box ul{
- margin:0;
- padding:0;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <ul id="con1">
- <li > 脚本之家 1</li>
- <li > 脚本之家 2</li>
- <li > 脚本之家 3</li>
- <li > 脚本之家 4</li>
- <li > 脚本之家 5</li>
- <li > 脚本之家 6</li>
- <li > 脚本之家 7</li>
- <li > 脚本之家 8</li>
- <li > 脚本之家 9</li>
- </ul>
- </div>
- <script>
- var area=document.getElementById("box");
- area.innerHTML+=area.innerHTML;
- var liHeight=24;
- area.scrollTop=0;
- var delay=2000;
- var speed=50;
- var time;
- function starMove(){
- area.scrollTop++;
- time=setInterval("scrollUp()",speed);
- }
- function scrollUp(){
- if(area.scrollTop%liHeight==0){
- clearInterval(time);
- setTimeout("starMove()",delay);
- }else{
- area.scrollTop++;
- if(area.scrollTop>=area.offsetHeight/2){
- area.scrollTop=0;
- }
- }
- }
- setTimeout("starMove()",delay);
- </script>
- </body>
- </html>
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题: JavaScript 切换特效与技巧总结 JavaScript 查找算法技巧总结 JavaScript 错误与调试技巧总结 JavaScript 数据结构与算法技巧总结 JavaScript 遍历算法与技巧总结及 JavaScript 数学运算用法总结
来源: http://www.jb51.net/article/135084.htm