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 文章截取部分无损html显示实现代码
May 04 Javascript
jQuery.each()用法分享
Jul 31 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
简述JS控制台的使用
Jul 15 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python定时关机小脚本
2018/06/20 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
公休请假条
2014/04/11 职场文书
安全生产月标语
2014/10/07 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
Python实现双向链表
2022/05/25 Python