JS不间断向上滚动 setInterval和clearInterval
2024-09-03 05:03:15
<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>
最新文章
- SharePoint 2013功能(SPFeature)与GUID对照表
- SqlServer -- char与varchar、nchar、N
- Atitit 发帖机系列(7) 词法分析的方法attilax大总结)
- codeforces 359D 二分答案+RMQ
- php 购物车的例子
- UVa 11174 (乘法逆元) Stand in a Line
- 15分钟弄懂 const 和 #define
- POJ3268 Silver Cow Party(dijkstra+矩阵转置)
- python cmd模块练习
- Flask对请求的处理
- Jenkins安装与配置
- hbmy周赛1--C
- [福大软工] W班 总成绩排行榜
- Python基础理论 - 函数
- EditPlus文本库编辑说明
- 抽屉之Tornado实战(5)--点赞与评论树
- <;Spark>;<;Programming>;<;RDDs>;
- ubantu 16.4 Hadoop 完全分布式搭建
- A solution for MySQL Assertion failure FIL_NULL
- HI-LO计数法,赌桌,与机会