首页 > 编程 > JavaScript > 正文

JS实现的文字间歇循环滚动效果完整示例

2019-11-19 14:21:08
字体:
来源:转载
供稿:网友

本文实例讲述了JS实现的文字间歇循环滚动效果。分享给大家供大家参考,具体如下:

先来看看运行效果:

具体代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>www.VeVB.COm - 间歇循环滚动</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数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表