使用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. 关于Tomcat的启动

    1.Tomcat分为安装版和解压版. 2.在Tomcat的解压版的bin路径下启动startup.bat的时候,如果没有启动成功,请检查是否设置了JAVA_HOME 3.建议不要在环境变量里面设置CA ...

  2. xBIM 基础09 WeXplorer 基本应用

    系列目录    [已更新最新开发文章,点击查看详细]  在本教程中,将学习如何创建最基本和最直接的查看器. 除了展示建筑模型外,不做其他任何操作.它将只使用内置导航,但是不会对按钮做出事件响应. &l ...

  3. java中return在Try-Catch中的执行顺序

    我们知道return会结束此方法并返回指定值.以及在Try-catch-finally中无论try代码块中有没有异常finally中的代码时都会被执行的.但是如果return包含在try-catch- ...

  4. sql-查看执行计划的方法

    sql执行计划:把SQL语句拆分为每个的操作步骤组合,按照一定的顺序执行得出结果,查看并看懂执行计划是调优的关键步骤 查看执行计划的方法 DBMS_XPLAN包 sql*plus AUTO trace ...

  5. MyBatis数据持久化(九)动态sql

    本文摘自:mybatis参考文档中文版 MyBatis的一个强大的特性之一通常是它的动态SQL能力.如果你有使用JDBC或其他相似框架的经验,你就明白条件地串联SQL字符串在一起是多么的痛苦,确保不能 ...

  6. 3ds max打造诱人三维水果教程:鸭梨_3dmax教程

    本系列我们介绍用3DsMAX打造美味诱人水果的实例,入门者可以按照步骤学习简单的造型和材质设定.之前我们介绍了苹果和桔子的绘制方法,今天我们介绍的主角是——鸭梨. 进入“创建”命令面板.选择“图形”按 ...

  7. angular踩坑记录

    ng-repeat和ng-click同时使用的时候,注意不能直接在ng-click当中写代码,必须在当前$scope中绑定一个事件,转为调用该事件.否则会出现意想不到的情况.具体原因点击这里. 使用自 ...

  8. 存储Hyper-V虚拟机的硬盘空间不足时的处理

    存储Hyper-V虚拟机的硬盘空间严重不足时的处理   ==先导出虚拟机到空间足够的硬盘,再在空间足够的分区上导入虚拟机 方法如下: 导出虚拟机: 导出之前,我们先删除不需要的快照. 在Hyper-V ...

  9. size_type类型

    由string类类型和vector类类型定义的类型,用以保存任意string对象或vector对象的长度,标准库类型将size_type定义为unsigned类型 string::size_type它 ...

  10. (转)JVM内存管理-----堆内存

    来源:http://blog.csdn.net/yu422560654/article/details/7952613 Heap堆内存理解 一个JVM实例只有一个堆内存,堆内存的大小是可以调节的.类加 ...