使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可

Dom内容

<div id="container">
<ul id="con1">
<li>javascript1</li>
<li>javascript2</li>
<li>javascript3</li>
<li>javascript4</li>
<li>javascript5</li>
<li>javascript6</li>
<li>javascript7</li>
</ul>
</div>

css内容

#container{width:400px;height:24px;margin:0 auto;border:1px solid red;overflow: hidden;}
ul{list-style: none;padding:0;margin:0}
ul li{height:24px;line-height: 24px;}

js相关内容

<script type="text/javascript">
var c=document.getElementById("container");
var con1=document.getElementById("con1");
con1.innerHTML+=con1.innerHTML; //把自身的内容变为原来的2倍
// timer,t;
var iHeight=24;
var d=1000;
var speed=50;
function sTop(){
if(c.scrollTop%iHeight==0){//如果卷去的距离能够除尽一行的高度
clearInterval(timer);//把定时器清除
t=setTimeout(startMove,d);//延迟1s后继续触发定时器
}
if(c.scrollTop>=con1.scrollHeight/2){ //如果卷去的高度>=整个ul高度的一半时
c.scrollTop=0;
c.scrollTop=c.scrollTop-con1.scrollHeight/2; //让ul回到原点 即c.scrollTop=0
}else{
c.scrollTop++; //如若不然,继续往上滚动
}
}
function startMove(){
c.scrollTop++;
timer=setInterval(sTop,speed);
}
startMove();
c.onmouseover=function(){
clearInterval(timer);
clearTimeout(t);
}
c.onmouseout=function(){
timer=setInterval(sTop,speed);
}
</script>

js文字的无缝滚动(上下)的更多相关文章

  1. angular实现的文字上下无缝滚动

    最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...

  2. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  3. JS实现文字图片无缝滚动

    今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...

  4. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. js实现标准无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  7. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  8. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  9. js实现表格无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. FPGA中亚稳态——让你无处可逃

    1. 应用背景 1.1         亚稳态发生原因 在FPGA系统中,如果数据传输中不满足触发器的Tsu和Th不满足,或者复位过程中复位信号的释放相对于有效时钟沿的恢复时间(recovery ti ...

  2. 山东理工oj--1912--IP地址(水题)

     IP地址 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 2011年2月3日,国际互联网名称与数字地址分配机构(ICANN) ...

  3. ubuntu12.04下NFS链接开发板并测试交叉编译的第一个应用

    思路:配置网络->安装NFS->配置NFS->挂载NFS服务->Down文件执行.Okay lets go! 配置网络: 在配置网络之前,首先咱得搞定与开发板的交互工作,那么这 ...

  4. 配置 NTP 时间服务器

    对于我们当前这种案例,主要目标是把 z01 这台服务器设置为时间服务器,剩下的 z02,z03 这两台机器同步 z01 的时间,我们需要这样做的原因是因为,整个集群架构中的时间,要保持一致. ** 检 ...

  5. Java获取环境变量和系统属性

    Java获取服务器环境变量和JVM系统变量    当程序中需要使用与操作系统相关的变量(例如:文件分隔符.换行符)时,Java提供了System类的静态方法getenv()和getProperty() ...

  6. 对比学习用 Keras 搭建 CNN RNN 等常用神经网络

    Keras 是一个兼容 Theano 和 Tensorflow 的神经网络高级包, 用他来组件一个神经网络更加快速, 几条语句就搞定了. 而且广泛的兼容性能使 Keras 在 Windows 和 Ma ...

  7. JavaScript学习——BOM对象

    1.BOM 对象:浏览器对象模型(操作与浏览器相关的内容) 2.Window 对象 Window 对象表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInt ...

  8. ARM的六大类指令集---LDR、LDRB、LDRH、LDM、STR、STRB、STRH、STM

    http://blog.csdn.net/u013477200/article/details/50723555

  9. Pyinstaller 0

    Pyinstaller 是一个小的可以打包我们所写的Python脚本,来生成相应的可执行文件. 它是怎么工作的? PyInstaller读取您编写的Python脚本.它会分析您的代码,以发现您的脚本执 ...

  10. (转)Hadoop Eclipse开发环境搭建

    来源:http://www.cnblogs.com/justinzhang/p/4261851.html This document is from my evernote, when I was s ...