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 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
vue项目中实现的微信分享功能示例
Jan 21 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
删除无限级目录与文件代码共享
2006/07/12 PHP
网络资源
2006/10/09 PHP
Admin generator, filters and I18n
2011/10/06 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
基于python的Paxos算法实现
2019/07/03 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
python两个list[]相加的实现方法
2020/09/23 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
高中毕业生自我鉴定例文
2013/12/29 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
文明城市创建标语
2014/06/16 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
导游词之西递宏村
2019/12/10 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Mysql 一主多从的部署
2022/05/20 MySQL