<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. laydate时间控件：开始时间，结束时间最大最小值

    时间控件地址及插件下载链接:https://www.layui.com/doc/modules/laydate.html 填充时间已两个功能为例: 1.添加功能 :时间 规则:选择开始时间后,点击结束 ...

  2. 给引入页面的js和css资源加上版本号，防止浏览器缓存资源

    最近因为在做前端开发的相关工作,每次发布新版本以后,不到5分钟,测试童鞋一个接一个的抱怨说BUG根本就没有修改,这个时候你说的最多的话就是“清缓存!!清页面缓存!!你没有清缓存!!你清理了页面缓存就对 ...

  3. Spring + Atomikos 分布式事务实现方式

    不同的数据库一定要分包建立 引用:http://blog.csdn.net/benluobobo/article/details/49818017 http://blog.csdn.net/yds49 ...

  4. windows服务器入门 初始化数据盘

    本人在寒假的时候自行搭建了一个服务器,在此分享一下我的方法.本人服务器的系统为Windows 2012R2 在后面的讲解中中文英文都会有    所以不用在意系统的语言问题 1)第一步  自然就是打开服 ...

  5. mysql的AB及读写和集群

    Mysql的AB及读写  第1章 Mysql的AB配置 1.1 master配置 1.2 slave配置 第2章 读写分离 2.1 安装mycat 2.2 启动mycat 2.3 登录mycat相关问 ...

  6. Asp.Net Core 客户端验证和远程验证

    我们先来看这样一个注册页面和它的后台Model @model RegisterViewModel @{ ViewBag.Title = "用户注册"; } <h1>用户 ...

  7. wordPress设计网页实践

    我希望能设计出世界上最美的画面! 首先进入你自己建立的网站http://localhost:8079/Frank,如上图所示.注意,编辑页面时,要可以上外网,否则wordPress的插件会下载出错! ...

  8. HttpClient的几种请求方式

    public static String doPostToken(String tokenUrl,String clientId,String clientSecret,String grantTyp ...

  9. postman带Token测试接口

    首先打开postman.是这样的界面 我们的需求是这样的.实现登录之后返回token.然后请求其他接口时在header头中带上token信息. OK.接下来我们这样操作: 现在登录没有操作token. ...

  10. TypeScript 迭代器(iterator)和生成器(generator)

    ⒈迭代器(iterator) 1.可迭代性 当一个对象实现了Symbol.iterator属性时,我们认为它是可迭代的. 一些内置的类型如 Array,Map,Set,String,Int32Arra ...