走马灯的js代码

近来做一网站，需要用到走马灯效果，根据网上结果，整理代码如下，以方便以后直接使用。

在js文件中加入如下函数：

 

代码

function Marquee(objID,vh,w,h,sp){
    var objOri=document.getElementById(objID);
    var objHTML=objOri.outerHTML;
    if(!objHTML)
    {
        var div = document.createElement("div");
        div.appendChild( objOri.cloneNode(true));
        objHTML = div.innerHTML;
    }
    var MarqueeFrame="MarqueeFrame_"+objID;
    var MarqueeObj="MarqueeObj_"+objID;
    var MarqueeObjPost="MarqueeObjPost_"+objID;
    var str=" < div  id ="+MarqueeFrame+"  style =\"OVERFLOW:  hidden; WIDTH: "+w+"px; HEIGHT: "+h+"px\" > ";
    str+=" < table  border =0  align =center  cellpadding =0  cellspacing =0  cellspace =0 >< tr > ";
    str+=" < td  id ="+MarqueeObj+"  valign =top  > "+objHTML+" </ td > ";
    str+=vh=="v"?" </ tr >< tr > ":"";
    str+=" < td  id ="+MarqueeObjPost+" > "+objHTML+" </ td ></ tr ></ table ></ div > ";
    
    //objOri.outerHTML=str;
    //FF不支持outerHTML,可以改用一下方法,不过需要jQuery1.3.2支持
    $(objOri).replaceWith(str);
    
    var mf=document.getElementById(MarqueeFrame);
    var obj=document.getElementById(MarqueeObj);
    var objPost=document.getElementById(MarqueeObjPost);
    
    var MyMar=setInterval(function(){InternalMarquee(mf,obj,objPost,vh)},sp);
    mf.οnmοuseοver=function() {clearInterval(MyMar)};
    mf.οnmοuseοut=function() {MyMar=setInterval(function(){InternalMarquee(mf,obj,objPost,vh)},sp)};
}

function InternalMarquee(mf,obj,objPost,vh)
{
    if(vh=="v")
    {
        if(objPost.offsetTop-mf.scrollTop < =0 ){
            mf.scrollTop- =obj.offsetHeight;
         }
        else{
            mf.scrollTop++;
        }
    }
    else
    {
        if(objPost.offsetLeft-mf.scrollLeft< =0){
             mf.scrollLeft- =obj.offsetWidth;
         }
        else{
            mf.scrollLeft++;
        }
    }
}

 

 

在页面中引入该js文件：

1       < script  src ="Scripts/jquery-1.3.2.js"  type ="text/javascript" ></ script >
2       < script  src ="Scripts/Script.js"  type ="text/javascript" ></ script >

 

页面中的调用方法：

 

代码

 1 
 2       < div  id ="Div1"  style ="white-space:nowrap;" >
 3       < img  alt =""  src ="Images/sy-mxhy-04.gif" />
 4       < img  alt =""  src ="Images/sy-mxhy-05.gif"   />
 5       </ div >
 6       < div  id ="test" >
 7       < div  id ="Div2" >
 8       < img  alt =""  src ="Images/sy-mxhy-04.gif" />
 9       < img  alt =""  src ="Images/sy-mxhy-05.gif"   />
10       </ div >
11       </ div >    
12       < table  id ="Div3" >
13       < tr >
14       < td >
15       < img  alt =""  src ="Images/sy-mxhy-04.gif" />
16       </ td >
17       < td >
18       < img  alt =""  src ="Images/sy-mxhy-05.gif"   />
19       </ td >
20       </ tr >
21       </ table >
22       < div  id ="div4" > 中华人民共和国 </ div >
23       < script  type ="text/javascript" >
24      Marquee( " Div1 " , " h " , 145 , 125 , 3 );
25      Marquee( " Div2 " , " v " , 145 , 30 , 3 );
26      Marquee( " Div3 " , " h " , 145 , 126 , 3 );
27      Marquee( " Div4 " , " h " , 10 , 126 , 20 );
28       </ script >

 

注意事项：

　　当进行水平滚动时，应该由使用者设置目标元素宽度，或在目标元素中加入white-space:nowrap式样，以防止内容本身换行导致的效果失败

　　宽度（或高度）设置不应超过目标元素本身的宽度或高度，否则没有效果

　　本函数中仅有两个方向，在使用中可以适当修改vh相关代码来增加其他动画方向。

 

转载于:https://www.cnblogs.com/Sangplus/archive/2010/02/21/1670523.html