走马灯的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++;
}
}
}
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>
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>
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相关代码来增加其他动画方向。