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

最新推荐文章于 2021-06-11 11:54:16 发布

原创最新推荐文章于 2021-06-11 11:54:16 发布 · 933 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #div #编程 #任务 #工作

<html>

<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>

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>

</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中也运用了面向对象编程的思想！