<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1><img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764741.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764742.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764743.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764744.jpg"></div>

<div id=demo2></div>

</div>

   <script>

   var speed=50

   demo2.innerHTML=demo1.innerHTML

   function Marquee(){

   if(demo2.offsetTop-demo.scrollTop<=0)

   demo.scrollTop-=demo1.offsetHeight

   else{

   demo.scrollTop++

   }

   }

   var MyMar=setInterval(Marquee,speed)

   demo.onmouseover=function() {clearInterval(MyMar)}

   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

   </script>

　　预览     参考http://www.jb51.net/article/74333.htm

<html>

<HEAD>

<TITLE>文字链接列表滚动</TITLE>

<META content="text/html; charset=gb2312" http-equiv=Content-Type>

<STYLE type=text/css>

#demo a {

 width:100%;

 overflow:hidden;

 font:12px/16px tahoma;

 display:block;

 text-decoration:none;

 margin:2px;

 color:#4a551c;

 padding-left:2px;

 text-align:left;

}

#demo a:hover {

 color:#ff6600;

}

</STYLE>

</HEAD>

<body>

<div id="demo" style="overflow:hidden;height:132px;width:350px; border:1px solid #dde5bc;">

 <div id="demo1">

  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>

  <a href="#">地方税务局网站建设方案 ……</a>

  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>

  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>

  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>

  <a href="#">地方税务局网站建设方案 ……</a>

  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>

  <a href="#">地方税务局网站建设方案 ……</a>

  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>

  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>

  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>

  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>

 </div>

 <div id="demo2"></div>

</div>

<script>

var speed=40

var demo=document.getElementById("demo");

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1");

demo2.innerHTML=demo1.innerHTML

function Marquee(){

 if(demo2.offsetTop-demo.scrollTop<=0)

  demo.scrollTop-=demo1.offsetHeight

 else{

  demo.scrollTop++

 }

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

</body>

</html>

原生JS中获取和设置滚动条的偏移位置都用：   demo.scrollTop ，如： 设置   demo.scrollTop =  1 也可以写成

  demo.scrollTop++ ;   获取 ： var a=  demo.scrollTop ;

Jquery中：设置：$("div").scrollTop(100);  获取：$("div").scrollTop()

，把上滚动的代码修改成下面， 更容易理解

    <div id="demo" style="overflow:scroll;height:132px;width:350px; border:1px solid #dde5bc;">

        <div id="demo1">

            <a href="#">11多彩的电脑机箱图标，很多颜色和风格……</a>

            <a href="#">22地方税务局网站建设方案 ……</a>

            <a href="#">33获得系统内存，并以圆饼图表现百分比……</a>

            <a href="#">44多彩的电脑机箱图标，很多颜色和风格……</a>

            <a href="#">55完全兼容IE, FF, Opera, 其它的还未经测试……</a>

            <a href="#">66地方税务局网站建设方案 ……</a>

            <a href="#">77多彩的电脑机箱图标，很多颜色和风格……</a>

            <a href="#">88地方税务局网站建设方案 ……</a>

            <a href="#">99完全兼容IE, FF, Opera, 其它的还未经测试……</a>

            <a href="#">1010获得系统内存，并以圆饼图表现百分比……</a>

            <a href="#">1111完全兼容IE, FF, Opera, 其它的还未经测试……</a>

            <a href="#">1212获得系统内存，并以圆饼图表现百分比……</a>

        </div>

        <div id="demo2"></div>

    </div>

<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
aa();

var MyMar ;
function aa() {
MyMar = setInterval(Marquee, speed)
};
demo.onmouseover = function () { clearInterval(MyMar) }
demo.onmouseout = function () { aa() }
</script>

 

函数调用setInterval和clearInterval

<div id="oDiv_showCurrTime" style="border:1px solid black; height:20px;"></div><button onclick="startX()">开始</button><button onclick="stopX()">停止</button>

<script>

var intX; //这个必须写在startX函数外或不写，stopX才有效。

function startX(){

 intX= setInterval(func,500) //通过函数调用setInterval时，第一个参数不可以用"func()"这种形式，只能直接用函数名

    var dT = document.getElementById("oDiv_showCurrTime");

    function func(){

        var dTime = new Date();

        dT.innerHTML = dTime.toLocaleTimeString()

    }

}

function stopX(){

    window.clearInterval(intX) //注意！如果var intX定义在startX内，则无法清除！

}

</script>

　　

JS不间断向上滚动 setInterval和clearInterval的更多相关文章

  1. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. js无间隙向上滚动

    一.优点:div可以load:缺点:滚动的时候有点娘,磨磨唧唧,不够干脆爽快 html <div id="my_msg" class="my-msg bg-whit ...

  3. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  4. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...

  5. js单条新闻向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. jquery无缝间歇向上滚动(间断滚动)

    jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...

  7. js实现图片向上播放（轮番滚动）

    js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...

  8. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  9. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. 【数据库开发】在Windows上以服务方式运行 MSOPenTech/Redis

    在Windows上以服务方式运行 MSOPenTech/Redis ServiceStack.Redis 使用教程里提到Redis最好还是部署到Linux下去,Windows只是用来做开发环境,现在这 ...

  2. 前端接收 post 请求返回的文件

    坐标过多无法用Get请求,只能用post下载. 但发现ajax发送的post请求没有触发下载,返回的流媒体会存在于接口返回的response中. 查询发现AJAX并不会唤起浏览器的下载窗口,AJAX设 ...

  3. C# 自定义特性(Attribute)详解

    什么是特性 特性的定义:公共语言运行时允许添加类似关键字的描述声明,叫做attribute,它对程序中的元素进行标注,如类型.字段.方法.和属性等.attribute和.NetFramework文件的 ...

  4. EMR目录

    EMR目录: E-MapReduce 是阿里云上的开源大数据平台,用户可以登录集群主节点查看相关安装路径. 登录后也可以使用 env |grep xxx 查看. 或者,在EMR Hadoop集群,切换 ...

  5. 《Tsinghua os mooc》第21~22讲 文件系统

    第二十一讲 文件系统 文件系统是操作系统中管理持久性数据的子系统,提供数据存储和访问功能. 组织.检索.读写访问数据 大多数计算机系统都有文件系统 Google 也是一个文件系统 文件是具有符号名,由 ...

  6. redis 基本数据类型及使用

    文章目录 相对其它 nosql 数据库的优势 杂项知识 基本数据类型 Key 关键字 String 类型(单键单值) List 类型 (单键多值) Set 类型 (单键多值) Hash类型 (KV模式 ...

  7. 安装jar包到本地仓库

    1.控制台安装 安装指定文件到本地仓库命令:mvn install:install-file-DgroupId=<groupId>       : 设置项目代码的包名(一般用组织名)-Da ...

  8. php底层变量存储

    变量存储 php的变量使用一个结构体 zval来保存的,在Zend/zend.h中我们可以看到zval的定义 struct _zval_struct { /* Variable information ...

  9. 【转】Visual Studio Code必备插件

    先ctrl+shift+p,弹出命令面板-选中Extensions:Install Extensions 或者直接点击左侧栏这个扩展按钮(Ctrl+Shift+X) 然后左侧栏就会显示出很多插件,如图 ...

  10. 整理一下rmq

    rmq(int i,int j,int a)表示查询a数组i到j区间的内容中的最大/最小值核心部分为二分区间以及st预处理算法 先说st预处理算法吧 int dp[i][j];//表示以i开始 长度为 ...