新作的项目里面有个页面用到了<marquee>标签结果,在firefox下面就是不工作。无奈写了一段代码,用来替代简单的marquee功能:
/*
* parameter: el -- marquee element
*
* html structure:
* <div ...>
* <marquee ...>
* <table width="770px"...>
*/
Marquee = function(el){
el.parentNode.style.overflow = "hidden";
el.parentNode.style.position = "relative";
var tab = el.getElementsByTagName("table")[0];
el.parentNode.appendChild(tab);
el.parentNode.removeChild(el);
el = tab;
el.style.position = "absolute";
el.style.left = "0px";
pfun = this;
this.pauseflag = false;
el.onmouseover = function(){pfun.pause()};
el.onmouseout = function(){pfun.resume()};
this.direction = -1;
this.timer = window.setInterval(function(){
if(!pfun.pauseflag){
var left = parseInt(el.style.left);
/*
* table 里总共有10张图片一字排开,
* 长度770px,这里使用540px,
* 原因是考虑到最后3幅图片不能全部飞过,
* 否则会有一段间隙显示空白
*/
if(left < 0 && left <= -540){
pfun.direction = 1
}else if(left >= 0){
pfun.direction = -1;
}
el.style.left = (left + (5*pfun.direction))+"px";
}
}, 200);
}
Marquee.prototype = {
pause : function(){
this.pauseflag = true;
},
resume : function(){
this.pauseflag = false;
}
}
/*
* check is firefox 2.x
*/
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ffversion>=2 && ffversion <= 3){
var els = document.getElementsByTagName("marquee");
for(var i = 0 ; i < els.length; i++)
new Marquee(els[i]);
}
}
HTML代码:
...
</marquee>
<script type="text/javascript" src="js/marquee.js"></script>
本文提供了一个在Firefox浏览器中替代<marquee>标签的JavaScript解决方案,通过自定义Marquee类实现滚动效果,并包括鼠标悬停暂停及离开后继续播放的功能。
1万+

被折叠的 条评论
为什么被折叠?



