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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
深入理解node.js之path模块
May 03 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
Python字符串格式化
2015/06/15 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python图像常规操作
2017/11/11 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
创建Django项目图文实例详解
2019/06/06 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
酒后驾驶检讨书
2014/01/27 职场文书
副处级干部考察材料
2014/05/17 职场文书
讲文明倡议书
2015/04/29 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server