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

2018-02-17 19:15:07来源:作者:人点击

分享

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

先来看看运行效果:

具体代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>www.th7.cn - 间歇循环滚动</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程序设计有所帮助。

您可能感兴趣的文章:

  • JS实现间歇滚动的运动效果实例
  • 简单实现js间歇或无缝滚动效果
  • JS实现物体带缓冲的间歇运动效果示例
  • js超时调用setTimeout和间歇调用setInterval实例分析
  • javascript学习笔记(十五) js间歇调用和超时调用
  • js实现的文字横向无间断滚动
  • js滚动条回到顶部的代码
  • js操作滚动条事件实例
  • 彻底搞懂JS无缝滚动代码
  • JS JQUERY实现滚动条自动滚到底的方法
  • js实现图片无缝滚动特效

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台