页面中多个marquees头尾滚动的js

 

 

 <html>

<head></head>

<!--js传的参数:二维数组--要滚动的层id,滚动层的高度-->
<body onload="init(new Array(['marquees',140],['marquees2',280]))">

<div id="marquees" onmouseover="over(this);"  onmouseout="out(this);">
  <ul>
   <li>1dfsdfdsfdsf</li>
    <li>2dfsdfdsfdsf</li>
     <li>3dfsdfdsfdsf</li>
       <li>4dfsdfdsfdsf</li>
        <li>5dfsdfdsfdsf</li>
  </ul>
</div>

<hr/>

<div id="marquees2" onmouseover="over(this);"  onmouseout="out(this);">
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=ESKN601&xpos=13'>1→yananndsffinfdsjwewewecxv</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=211J601&xpos=39'>2→职工sfs主管sdf理的新sfwef和新任务</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=211J601&xpos=38'>3对改wertete企业werwer工作的reter考</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=VGP8501&xpos=16''>4改制企eretre劳er系浅rte</a><br>
  <br>
</div>

<script language="JavaScript">

var objArray=new Array();//存储参数的数组
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

function over(divObj)
{
   divObj.lang="true";
}
function out(divObj)
{
   divObj.lang="false";
}

function init(arr)//参数是要滚动的Div的id数组
{
   for(var i=0;i<arr.length;i++){

       var divobj=document.getElementById(arr[i][0]);
       divobj.style.width=0;
       divobj.style.height=arr[i][1];
       divobj.style.overflowX="visible";
       divobj.style.overflowY="hidden";
       divobj.noWrap=true;
       divobj.lang="false";
       var preTop=0;
      
       arr[i].push(preTop);
      
       templayer.innerHTML="";

       var conten=divobj.innerHTML;
       if(conten.indexOf("<ul>")!=-1||conten.indexOf("<UL>")!=-1||conten.indexOf("<Ul>")!=-1||conten.indexOf("<uL>")!=-1)
       {
           conten=conten.replace("<ul>","");
           conten=conten.replace("</ul>","");
           conten=conten.replace("<UL>","");
           conten=conten.replace("</UL>","");
           conten=conten.replace("<Ul>","");
           conten=conten.replace("</Ul>","");
           conten=conten.replace("<uL>","");
           conten=conten.replace("</uL>","");
       }
       while(templayer.offsetHeight<arr[i][1])
       {
           templayer.innerHTML+=conten;
       }
       divobj.innerHTML="<ul>"+templayer.innerHTML+templayer.innerHTML+"</ul>";
     
       var templayerHeight=templayer.offsetHeight;
       arr[i].push(templayerHeight);
      
       objArray.push(arr[i]);
      
       setInterval("scrollUp()",50);
   }
}

 

function scrollUp(){
   
  for(var i=0;i<objArray.length;i++)
  {
     var divobj=document.getElementById(objArray[i][0]);
     if(divobj.lang=="true")
     {
         continue;
     }
     objArray[i][objArray[i].length-2]=divobj.scrollTop;
     divobj.scrollTop+=1;

     if(objArray[i][objArray[i].length-2]==divobj.scrollTop)
     {
        divobj.scrollTop=objArray[i][objArray[i].length-1]-objArray[i][1];
        divobj.scrollTop+=1;
     }
  }
 
}

</script>

<script language="JavaScript">

</body>

</html>

 

 

 

呵呵!费了点力气写出来的,不对,应该是改出来的。之前在网上找了个Js,先看代码:

 

 

<div id="marquees">
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=ESKN601&xpos=13'>→共和国的脊梁——献给与共和国一起成长的劳模</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=211J601&xpos=39'>→职工民主管理的新形势和新任务</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=211J601&xpos=38'>对改制企业工会工作的思考</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=VGP8501&xpos=16''>改制企业劳动关系浅析</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=VGP8501&xpos=0'>职代会与厂务公开关系之研究</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=ESKN601&xpos=10'>直面中国煤矿的安全软肋—矿井深处手记</a><br>
  <br>
  <a href=''http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=ESKN601&xpos=15'>当前世界基本存在的几类社会模式和工运模式</a><br>
  <br>
  <a href='http://ffjtgh.home.sunbo.net/show_hdr.php?xname=6UQ0501&dname=ESKN601&xpos=14''>共和国55年:“八大嬗变”见证非凡历程</a><br>
  <br>
</div>
<script language="JavaScript">

marqueesHeight=140;
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()",30);//越大越慢
}
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>

 

       我发现这个js在一个页面中只能滚动一个层,于是改变了传参的方式,将要滚动的层作为对象传给页面的 onload事件调用的函数,问题也在这,js是不存在什么面向对象的编程的,但这并难不到我,将参数作为二维数组传进去就行了,而一维数组的每个元素看成是一个层对象,而一个二维数组的每个元素看成是各个层对象的属性就行了,然后在接下来的函数中的编写就是完全是面向对象的编程的方式了。

       呵呵!不知不觉,在js中也运用了面向对象编程的思想!

 

 


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值