近来做一网站，需要用到走马灯效果，根据网上结果，整理代码如下，以方便以后直接使用。
在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
在页面中引入该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相关代码来增加其他动画方向。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。