新作的项目里面有个页面用到了<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>
分享到:
相关推荐
5. **兼容性**:jQuery.marquee.js与大部分现代浏览器兼容,包括Chrome、Firefox、Safari、Edge以及IE9及以上版本。 接下来,我们探讨如何使用这个插件。在项目中引入jQuery库和jquery.marquee.js文件后,可以使用...
div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 代码如下: <marquee behavior=”scroll” contenteditable=”true” xss=removed ...
然而,`<marquee>`是Internet Explorer浏览器特有的标签,它在Firefox和其他标准浏览器中并不支持。鉴于此,我们需要通过JavaScript来实现一个跨浏览器的滚动效果,以确保在各种环境下都能正常工作。 首先,让我们...
它不仅支持文字、图片甚至整个HTML元素的滚动,而且具备兼容性优势,能在各大主流浏览器(如Chrome、Firefox、Safari、Edge和Internet Explorer)上流畅运行,这在多浏览器环境下尤其重要。 jQuery Marquee.js提供...
在这个“js文字滚动(IE火狐兼容版)”中,我们主要探讨的是如何利用JavaScript来创建一个在不同浏览器上都能正常运行的文字滚动效果,包括Internet Explorer(IE)和Firefox等主流浏览器。 文字滚动是一种常见的网页...
JavaScript实现的无缝滚动方案能更好地兼容现代浏览器(如Firefox、Opera、Safari、Chrome)。 - 为了确保兼容性,我们需要考虑使用`requestAnimationFrame`来代替定时器,它能提供更平滑的动画效果,且能适应...
然而,传统的HTML `<marquee>` 标签在IE浏览器中具有良好的兼容性,但在其他如Firefox、Chrome等现代浏览器中表现不佳。为了解决这一问题,开发者通常会使用JavaScript来实现跨浏览器的Marquee效果,以确保在各种...
6. **兼容性**:Marquee-js考虑到跨浏览器的兼容性,确保在主流的现代浏览器上都能正常工作,包括Chrome、Firefox、Safari、Edge等。 7. **性能优化**:通过合理的DOM操作和事件处理,尽可能减少对浏览器性能的影响...
无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...
此代码不仅在主流浏览器如火狐(Firefox)中兼容,而且可能也适用于其他常见的Web浏览器,如Chrome、Safari和Edge。 描述中的“非常实用的特效代码,可以完美运行”表明这个代码片段已经经过测试,能够在实际环境中...
文档提到该功能兼容IE、Firefox和Opera这三种主流浏览器。这意味着开发者在实现该功能时,需要特别注意以下几点: 1. **CSS兼容性**:确保使用的CSS属性和选择器能在不同浏览器下正常工作,可能需要使用特定的前缀...
这种方法对Firefox等不支持`<marquee>`的浏览器更为友好。 总结来说,`<marquee>`标签提供了一种简单快速的实现循环滚动的方式,但其浏览器兼容性有限。而使用`div`配合JavaScript可以实现更广泛的浏览器支持,尽管...
### 使用JavaScript实现Marquee滚动字幕效果 随着Web标准的发展与普及,许多早期HTML标签因为不符合现代Web设计规范而逐渐被淘汰或被边缘化,`<marquee>`标签就是其中之一。尽管`<marquee>`标签提供了方便快捷的...
4. **浏览器兼容性**:MSClass已经针对IE、Firefox、Opera、NS和MYIE等主流浏览器进行了兼容性调整。 5. **指定范围间歇滚动**:允许在特定范围内进行间歇滚动,提高了用户体验。 程序的其他改进: 1. **连续间歇...
5. **兼容性**:作为基于jQuery的插件,它在大部分现代浏览器中都有良好的兼容性,包括Chrome、Firefox、Safari、Edge等。 6. **易于集成**:只需几行代码,就能将滚动效果添加到现有的HTML元素上,简化了开发流程。...
"表格是的横向图片滚动无用marquee类在firefox里不兼容.html"提到了一个常见问题,即HTML的`<marquee>`标签在某些浏览器(如Firefox)中不支持。`<marquee>`是HTML4中的非标准元素,用于创建自动滚动的内容,但现代...
7. **浏览器兼容性**:这个例子中的代码考虑了火狐(Firefox)和IE浏览器的兼容性,使用的是XHTML标准,同时JavaScript代码也是通用的,可以在多种浏览器环境中运行。 总结来说,这个HTML页面展示了如何使用HTML、...