提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

文字不间断滚动(上下左右)实例代码

实例代码 文字 滚动 不间断 上下左右
2023-06-13 09:14:50 时间

向上

复制代码代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>连续向上滚动</title>
<styletype="text/css">
<!--
body{
 font-size:9pt;
 color:#000000;
}
a{
   color:#0000FF;
 text-decoration:none;
}
a:hover{
 color:#FF0000;
 text-decoration:underline;
}
-->
</style>
</head>
<body>
<divid="marquees"><ahref="#">链接一</a><br>
 <br>
 <ahref="#">链接二</a><br>
 <br>
 <ahref="#">链接三</a><br>
 <br>
 <ahref="#">链接四</a><br>
 <br>
</div>
<scriptlanguage="JavaScript">

marqueesHeight=200;
stopscroll=false;

with(marquees){
 style.width=0;
 style.height=marqueesHeight;
 style.overflowX="visible";
 style.overflowY="hidden";
 noWrap=true;
 onmouseover=newFunction("stopscroll=true");
 onmouseout=newFunction("stopscroll=false");
}
document.write("<divid="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>");

preTop=0;currentTop=0;

functioninit(){
 templayer.innerHTML="";
 while(templayer.offsetHeight<marqueesHeight){
   templayer.innerHTML+=marquees.innerHTML;
 }
 marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
 setInterval("scrollUp()",100);
}
document.body.onload=init;

functionscrollUp(){
 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>


向下
复制代码代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>连续向下滚动</title>
<styletype="text/css">
<!--
body{
 font-size:9pt;
 color:#000000;
}
a{
   color:#0000FF;
 text-decoration:none;
}
a:hover{
 color:#FF0000;
 text-decoration:underline;
}
-->
</style>
</head>
<body>
<divid="marquees"><ahref="#">链接一</a><br>
 <br>
 <ahref="#">链接二</a><br>
 <br>
 <ahref="#">链接三</a><br>
 <br>
 <ahref="#">链接四</a><br>
 <br>
</div>
<scriptlanguage="JavaScript">

marqueesHeight=200;

with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=newFunction("stopscroll=true");
onmouseout=newFunction("stopscroll=false");
}
document.write("<divid="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>");
preTop=0;currentTop=0;getlimit=0;stopscroll=false;

functioninit(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollDown()",10);
}init();

functionscrollDown(){
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>


向左
复制代码代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>连续向左滚动</title>
<styletype="text/css">
<!--
body{
 font-size:9pt;
 color:#000000;
}
a{
   color:#0000FF;
 text-decoration:none;
}
a:hover{
 color:#FF0000;
 text-decoration:underline;
}
-->
</style>
</head>
<body>
<divid="marquees"><ahref="#">链接一</a><ahref="#">链接二</a><ahref="#">链接三</a><ahref="#">链接四</a></div>
<divid="templayer"style="position:absolute;left:0;top:0;visibility:hidden"></div>
<scriptlanguage="JavaScript">

marqueesWidth=200;

with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=newFunction("stopscroll=true");
onmouseout=newFunction("stopscroll=false");
}
preLeft=0;currentLeft=0;stopscroll=false;

functioninit(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",100);
}init();

functionscrollLeft(){
if(stopscroll==true)return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
 marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}


</script>
</body>
</html>


向右
复制代码代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>连续向右滚动</title>
<styletype="text/css">
<!--
body{
 font-size:9pt;
 color:#000000;
}
a{
   color:#0000FF;
 text-decoration:none;
}
a:hover{
 color:#FF0000;
 text-decoration:underline;
}
-->
</style>
</head>
<body>
<divid="marquees"><ahref="#">链接一</a><ahref="#">链接二</a><ahref="#">链接三</a><ahref="#">链接四</a></div>
<divid="templayer"style="position:absolute;left:0;top:0;visibility:hidden"></div>
<scriptlanguage="JavaScript">

marqueesWidth=200;

with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=newFunction("stopscroll=true");
onmouseout=newFunction("stopscroll=false");
}
preTop=0;currentTop=0;getlimit=0;stopscroll=false;

functioninit(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollRight()",10);
}init();

functionscrollRight(){
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>

相关文章