<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. C语言 班级档案管理系统实现

    代码地址:github地址 班级档案管理系统 原题目要求是对一个有N个学生的班级,通过该系统实现对该班级学生的基本信息进行录入. 显示.修改.删除.保存等操作的管理. 由于个人需要,我单独将项目改造为 ...

  2. Hadoop配置环境变量Program~2的用法

    [学习笔记] 3)配置环境变量:(环境变量中的~1,~2,~3的用法)i)JAVA_HOME:注意C:\Program Files目录存在空格,变成C:\Progra~1\Java\jdk1.8.0_ ...

  3. java源码 -- TreeMap

    简介 TreeMap 是一个有序的key-value集合,它是通过红黑树实现的.TreeMap 继承于AbstractMap,所以它是一个Map,即一个key-value集合.TreeMap 实现了N ...

  4. Zuul 源码的分析

    Zuul 就是个网关,过滤所有数据, 和Eureka的区别就是,前者或过滤数据,一般进行权限拦截,后者进行请求的转发,只是链接. Zuul包含了对请求的路由和过滤两个最主要的功能: 使用 注解@Ena ...

  5. ARTS第七周打卡

    Algorithm : 做一个 leetcode 的算法题 ////////////////////////////////////////////////////////////////////// ...

  6. windows安装redis并为php5.4添加redis扩展

    第一步 安装包下载 首先下载php5.4对应版本的php_igbinary.dll,php_redis.dll扩展.(php7以后可不需要php_igbinary.dl这个文件了) 链接:https: ...

  7. VMware安装windows7系统

    1.进入VMware系统,选择创建新的虚拟机 2.进入安装页面,选择自定义安装 3.选择虚拟机硬件兼容性,选择与自己软件相匹配的硬件兼容性 4.选择下一步后,选择稍后安装操作系统 5.选择客户机操作系 ...

  8. python中检测某个变量是否有定义

    目录 第一种方法使用内置函数locals() 第二种方法使用内置函数dir() 第三种方法使用内置函数vars() 第一种方法使用内置函数locals() 'testvar' in locals(). ...

  9. 通过json_set函数,来修改data字段的值

    SELECT REPLACE(json_extract(param,'$.payFundAcc'),'"','') from t_external_trade_event where sta ...

  10. Session共享问题---理论

    随着网站访问量增加,初期的一台服务器已经完全不能支持业务,这个时候我们就需要增加服务器设备,来抗住请求的增量,如下所示: 负载均衡的目的本来就是要为了平均分配请求,所以没有固定第一次访问和第二次访问的 ...