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


Posted in Javascript onFebruary 13, 2018

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>3water.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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
jquery实用代码片段集合
Aug 12 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
three.js 入门案例详解
Jan 23 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
React中的refs的使用教程
Feb 13 #Javascript
tween.js缓动补间动画算法示例
Feb 13 #Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 #Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 #Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 #Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 #Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 #Javascript
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
phpStorm2020 注册码
2020/09/17 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
详解Immutable及 React 中实践
2018/03/01 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python turtle 绘制太极图的实例
2019/12/18 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
加工操作管理制度
2014/01/19 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技