推荐订阅源

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

在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相关代码来增加其他动画方向。