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 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
理解javascript中的严格模式
Feb 01 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
js 异步处理进度条
2010/04/01 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python数据结构之Array用法实例
2014/10/09 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
使用python3实现操作串口详解
2019/01/01 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Django的Modelforms用法简介
2019/07/27 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
解决python对齐错误的方法
2020/07/16 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014年转正工作总结
2014/11/08 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python