走马灯的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.onmouseover=function() {clearInterval(MyMar)};
    mf.onmouseout=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相关代码来增加其他动画方向。

 

posted @ 2010-02-21 14:39  Sangplus  阅读(2988)  评论(1编辑  收藏  举报