JS不间断向上滚动 setInterval和clearInterval
<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的更多相关文章
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- js无间隙向上滚动
一.优点:div可以load:缺点:滚动的时候有点娘,磨磨唧唧,不够干脆爽快 html <div id="my_msg" class="my-msg bg-whit ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- js判断鼠标向上滚动并浮动导航
<div id="Jnav"> <ul class="nav"> <li><a href="#"& ...
- js单条新闻向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- jquery无缝间歇向上滚动(间断滚动)
jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...
- js实现图片向上播放(轮番滚动)
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
随机推荐
- laydate时间控件:开始时间,结束时间最大最小值
时间控件地址及插件下载链接:https://www.layui.com/doc/modules/laydate.html 填充时间已两个功能为例: 1.添加功能 :时间 规则:选择开始时间后,点击结束 ...
- 给引入页面的js和css资源加上版本号,防止浏览器缓存资源
最近因为在做前端开发的相关工作,每次发布新版本以后,不到5分钟,测试童鞋一个接一个的抱怨说BUG根本就没有修改,这个时候你说的最多的话就是“清缓存!!清页面缓存!!你没有清缓存!!你清理了页面缓存就对 ...
- Spring + Atomikos 分布式事务实现方式
不同的数据库一定要分包建立 引用:http://blog.csdn.net/benluobobo/article/details/49818017 http://blog.csdn.net/yds49 ...
- windows服务器入门 初始化数据盘
本人在寒假的时候自行搭建了一个服务器,在此分享一下我的方法.本人服务器的系统为Windows 2012R2 在后面的讲解中中文英文都会有 所以不用在意系统的语言问题 1)第一步 自然就是打开服 ...
- mysql的AB及读写和集群
Mysql的AB及读写 第1章 Mysql的AB配置 1.1 master配置 1.2 slave配置 第2章 读写分离 2.1 安装mycat 2.2 启动mycat 2.3 登录mycat相关问 ...
- Asp.Net Core 客户端验证和远程验证
我们先来看这样一个注册页面和它的后台Model @model RegisterViewModel @{ ViewBag.Title = "用户注册"; } <h1>用户 ...
- wordPress设计网页实践
我希望能设计出世界上最美的画面! 首先进入你自己建立的网站http://localhost:8079/Frank,如上图所示.注意,编辑页面时,要可以上外网,否则wordPress的插件会下载出错! ...
- HttpClient的几种请求方式
public static String doPostToken(String tokenUrl,String clientId,String clientSecret,String grantTyp ...
- postman带Token测试接口
首先打开postman.是这样的界面 我们的需求是这样的.实现登录之后返回token.然后请求其他接口时在header头中带上token信息. OK.接下来我们这样操作: 现在登录没有操作token. ...
- TypeScript 迭代器(iterator)和生成器(generator)
⒈迭代器(iterator) 1.可迭代性 当一个对象实现了Symbol.iterator属性时,我们认为它是可迭代的. 一些内置的类型如 Array,Map,Set,String,Int32Arra ...