`

firefox 2 marquee兼容

阅读更多

新作的项目里面有个页面用到了<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>
 

 

分享到:
评论

相关推荐

    jquery.marquee.js官方下载

    5. **兼容性**:jQuery.marquee.js与大部分现代浏览器兼容,包括Chrome、Firefox、Safari、Edge以及IE9及以上版本。 接下来,我们探讨如何使用这个插件。在项目中引入jQuery库和jquery.marquee.js文件后,可以使用...

    div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 代码如下: &lt;marquee behavior=”scroll” contenteditable=”true” xss=removed ...

    js实现marquee标签

    然而,`&lt;marquee&gt;`是Internet Explorer浏览器特有的标签,它在Firefox和其他标准浏览器中并不支持。鉴于此,我们需要通过JavaScript来实现一个跨浏览器的滚动效果,以确保在各种环境下都能正常工作。 首先,让我们...

    jquery.marquee.js

    它不仅支持文字、图片甚至整个HTML元素的滚动,而且具备兼容性优势,能在各大主流浏览器(如Chrome、Firefox、Safari、Edge和Internet Explorer)上流畅运行,这在多浏览器环境下尤其重要。 jQuery Marquee.js提供...

    js文字滚动(IE火狐兼容版)

    在这个“js文字滚动(IE火狐兼容版)”中,我们主要探讨的是如何利用JavaScript来创建一个在不同浏览器上都能正常运行的文字滚动效果,包括Internet Explorer(IE)和Firefox等主流浏览器。 文字滚动是一种常见的网页...

    javascript特效无缝滚动marquee

    JavaScript实现的无缝滚动方案能更好地兼容现代浏览器(如Firefox、Opera、Safari、Chrome)。 - 为了确保兼容性,我们需要考虑使用`requestAnimationFrame`来代替定时器,它能提供更平滑的动画效果,且能适应...

    兼容多浏览器的字幕特效Marquee的通用js类

    然而,传统的HTML `&lt;marquee&gt;` 标签在IE浏览器中具有良好的兼容性,但在其他如Firefox、Chrome等现代浏览器中表现不佳。为了解决这一问题,开发者通常会使用JavaScript来实现跨浏览器的Marquee效果,以确保在各种...

    Marquee-js

    6. **兼容性**:Marquee-js考虑到跨浏览器的兼容性,确保在主流的现代浏览器上都能正常工作,包括Chrome、Firefox、Safari、Edge等。 7. **性能优化**:通过合理的DOM操作和事件处理,尽可能减少对浏览器性能的影响...

    JS实现无缝循环marquee滚动效果

    无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...

    jquery文字不断向上滚动代码(兼容火狐).zip

    此代码不仅在主流浏览器如火狐(Firefox)中兼容,而且可能也适用于其他常见的Web浏览器,如Chrome、Safari和Edge。 描述中的“非常实用的特效代码,可以完美运行”表明这个代码片段已经经过测试,能够在实际环境中...

    无间断滚动的新闻文章列表,兼容IE、Firefox和Opera,符合W3C标准。可作Marquee

    文档提到该功能兼容IE、Firefox和Opera这三种主流浏览器。这意味着开发者在实现该功能时,需要特别注意以下几点: 1. **CSS兼容性**:确保使用的CSS属性和选择器能在不同浏览器下正常工作,可能需要使用特定的前缀...

    分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    这种方法对Firefox等不支持`&lt;marquee&gt;`的浏览器更为友好。 总结来说,`&lt;marquee&gt;`标签提供了一种简单快速的实现循环滚动的方式,但其浏览器兼容性有限。而使用`div`配合JavaScript可以实现更广泛的浏览器支持,尽管...

    用javascript代替marquee的滚动字幕效果代码

    ### 使用JavaScript实现Marquee滚动字幕效果 随着Web标准的发展与普及,许多早期HTML标签因为不符合现代Web设计规范而逐渐被淘汰或被边缘化,`&lt;marquee&gt;`标签就是其中之一。尽管`&lt;marquee&gt;`标签提供了方便快捷的...

    再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

    4. **浏览器兼容性**:MSClass已经针对IE、Firefox、Opera、NS和MYIE等主流浏览器进行了兼容性调整。 5. **指定范围间歇滚动**:允许在特定范围内进行间歇滚动,提高了用户体验。 程序的其他改进: 1. **连续间歇...

    滚动的文字

    5. **兼容性**:作为基于jQuery的插件,它在大部分现代浏览器中都有良好的兼容性,包括Chrome、Firefox、Safari、Edge等。 6. **易于集成**:只需几行代码,就能将滚动效果添加到现有的HTML元素上,简化了开发流程。...

    收集几款图片滚动代码(横向、竖向、停顿、文字结合等)

    "表格是的横向图片滚动无用marquee类在firefox里不兼容.html"提到了一个常见问题,即HTML的`&lt;marquee&gt;`标签在某些浏览器(如Firefox)中不支持。`&lt;marquee&gt;`是HTML4中的非标准元素,用于创建自动滚动的内容,但现代...

    DOCTYPE html PUBLIC.doc

    7. **浏览器兼容性**:这个例子中的代码考虑了火狐(Firefox)和IE浏览器的兼容性,使用的是XHTML标准,同时JavaScript代码也是通用的,可以在多种浏览器环境中运行。 总结来说,这个HTML页面展示了如何使用HTML、...

Global site tag (gtag.js) - Google Analytics