文字不间断滚动(上下左右)实例代码_Javascript教程-查字典教程网
文字不间断滚动(上下左右)实例代码
文字不间断滚动(上下左右)实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:向上复制代码代码如下:连续向上滚动链接一链接二链接三链接四marqueesHeight=200;stopscroll=false;with(...

向上

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>连续向上滚动</title>

<style type="text/css">

<>

</style>

</head>

<body>

<div id="marquees"> <a href="#">链接一</a><br>

<br>

<a href="#">链接二</a><br>

<br>

<a href="#">链接三</a><br>

<br>

<a href="#">链接四</a><br>

<br>

</div>

<script language="JavaScript">

marqueesHeight=200;

stopscroll=false;

with(marquees){

style.width=0;

style.height=marqueesHeight;

style.overflowX="visible";

style.overflowY="hidden";

noWrap=true;

onmouseover=new Function("stopscroll=true");

onmouseout=new Function("stopscroll=false");

}

document.write('<div id="templayer"></div>');

preTop=0; currentTop=0;

function init(){

templayer.innerHTML="";

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

}

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

setInterval("scrollUp()",100);

}

document.body.onload=init;

function scrollUp(){

if(stopscroll==true) return;

preTop=marquees.scrollTop;

marquees.scrollTop+=1;

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight;

marquees.scrollTop+=1;

}

}

</script>

</body>

</html>

向下

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>连续向下滚动</title>

<style type="text/css">

<>

</style>

</head>

<body>

<div id="marquees"> <a href="#">链接一</a><br>

<br>

<a href="#">链接二</a><br>

<br>

<a href="#">链接三</a><br>

<br>

<a href="#">链接四</a><br>

<br>

</div>

<script language="JavaScript">

marqueesHeight=200;

with(marquees){

style.width=0;

style.height=marqueesHeight;

style.overflowX="visible";

style.overflowY="hidden";

noWrap=true;

onmouseover=new Function("stopscroll=true");

onmouseout=new Function("stopscroll=false");

}

document.write('<div id="templayer"></div>');

preTop=0; currentTop=0;getlimit=0;stopscroll=false;

function init(){

templayer.innerHTML="";

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

}

marquees.innerHTML+=templayer.innerHTML;

setInterval("scrollDown()",10);

}init();

function scrollDown(){

if(stopscroll==true) return;

preTop=marquees.scrollTop;

marquees.scrollTop-=1;

if(preTop==marquees.scrollTop){

if(!getlimit){

marquees.scrollTop=templayer.offsetHeight*2;

getlimit=marquees.scrollTop;

}

marquees.scrollTop=getlimit-templayer.offsetHeight+marqueesHeight;

marquees.scrollTop-=1;

}

}

</script>

</body>

</html>

向左

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>连续向左滚动</title>

<style type="text/css">

<>

</style>

</head>

<body>

<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>

<div id="templayer"></div>

<script language="JavaScript">

marqueesWidth=200;

with(marquees){

style.height=0;

style.width=marqueesWidth;

style.overflowX="hidden";

style.overflowY="visible";

noWrap=true;

onmouseover=new Function("stopscroll=true");

onmouseout=new Function("stopscroll=false");

}

preLeft=0; currentLeft=0; stopscroll=false;

function init(){

templayer.innerHTML="";

while(templayer.offsetWidth<marqueesWidth){

templayer.innerHTML+=marquees.innerHTML;

}

marquees.innerHTML+=templayer.innerHTML;

setInterval("scrollLeft()",100);

}init();

function scrollLeft(){

if(stopscroll==true) return;

preLeft=marquees.scrollLeft;

marquees.scrollLeft+=1;

if(preLeft==marquees.scrollLeft){

marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;

}

}

</script>

</body>

</html>

向右

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>连续向右滚动</title>

<style type="text/css">

<>

</style>

</head>

<body>

<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>

<div id="templayer"></div>

<script language="JavaScript">

marqueesWidth=200;

with(marquees){

style.height=0;

style.width=marqueesWidth;

style.overflowX="hidden";

style.overflowY="visible";

noWrap=true;

onmouseover=new Function("stopscroll=true");

onmouseout=new Function("stopscroll=false");

}

preTop=0; currentTop=0; getlimit=0; stopscroll=false;

function init(){

templayer.innerHTML="";

while(templayer.offsetWidth<marqueesWidth){

templayer.innerHTML+=marquees.innerHTML;

}

marquees.innerHTML+=templayer.innerHTML;

setInterval("scrollRight()",10);

}init();

function scrollRight(){

if(stopscroll==true) return;

preLeft=marquees.scrollLeft;

marquees.scrollLeft-=1;

if(preLeft==marquees.scrollLeft){

if(!getlimit){

marquees.scrollLeft=templayer.offsetWidth*2;

getlimit=marquees.scrollLeft;

}

marquees.scrollLeft=getlimit-templayer.offsetWidth+marqueesWidth;

marquees.scrollLeft-=1;

}

}

</script>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类