<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. 2019年11月27日 Linux所学知识 总结

    查看网络信息和网络状态 nmcli connection show 使用con-name参数指定公司使用的网络会话名称company,然后依次用ifname参数指定本机的网卡名称. 用autoconn ...

  2. 【数据库开发】Redis数据库服务器启动配置

    Redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sor ...

  3. iframe里访问父级里的方法属性

    window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名 window.parent.Func();  // 访问属性Func()是在父 ...

  4. PHP反射API的使用、体会、说明

    最近开发支付宝相关功能的时候,由于支付宝的SDK比较落伍,不支持composer的方式加载,使用三方的composer SDK又觉得不放心 为了简化代码的调用方式,使用PHP的反射类针对支付宝官方SD ...

  5. mysql--简单操作

    一.数据库的基本操作 查看当前所有存在的数据库 show databases; //mysql 中不区分大小写.(databank 是之前创建的) 创建数据库 create database data ...

  6. Python练手项目：20行爬取全王者全英雄皮肤

    引言    王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. ...

  7. element form 校验数组每一项

    1.校验的数据结构如下: 2.html结构 <el-dialog :title="title" :visible.sync="visable" width ...

  8. [转帖]两张图看懂GDT、GDTR、LDT、LDTR的关系

    两张图看懂GDT.GDTR.LDT.LDTR的关系 2018-06-09 18:13:53 Six_666A 阅读数 2044更多 分类专栏: 深入理解linux内核   转自:http://ju.o ...

  9. [转帖]Oracle数据安全--校验Oracle安装软件的 SHA码 防范注入风险

    Oracle数据安全--校验Oracle安装软件的 SHA码 防范注入风险 https://www.toutiao.com/i6723512458482303499/ certutil md5sums ...

  10. [转帖]Cacls和ICacls

    Cacls和ICacls https://www.cnblogs.com/Aley/p/11089538.html Need Study 解释:  Cacls:显示或修改文件的访问控制列表(ACL) ...