源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-05-12 00:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:文字不间断滚动(上下左右)实例代码
向上
[url=#]  <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" style="position:absolute;z-index:1;visibility:hidden"></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"> <!-- body {  font-size: 9pt;  color: #000000; } a {     color: #0000FF;  text-decoration: none; } a:hover {  color: #FF0000;  text-decoration: underline; } --> </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" style="position:absolute;z-index:1;visibility:hidden"></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>
向左
[url=#]<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></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"> <!-- body {  font-size: 9pt;  color: #000000; } a {     color: #0000FF;  text-decoration: none; } a:hover {  color: #FF0000;  text-decoration: underline; } --> </style> </head> <body> <div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div> <div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部