新作的项目里面有个页面用到了<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>
分享到:
相关推荐
div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 代码如下: <marquee behavior=”scroll” contenteditable=”true” xss=removed ...
该课件是关于marquee的讲解: 方向:<direction=#> #=left, right,up,down <marquee direction=left>从右向左移!</marquee> 方式:<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈...
MARQUEE 元素 marquee 对象 doc 手册
Marquee标签一直以来都被W3C排斥,而且,屁股后...所以,俺就做了个支持多个实例,兼容性好的替代品(其实是一年前做的...),虽然没什么技术含量,可是简单实用,只要简简单单的四步就能实现Marquee替代无间滚动效果。
<marquee> ... </marquee> 移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等 方向 <direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移!</marquee> 方式 ...
marquee效果
marquee无缝隙循环 向左 向右 近日研究marquee无缝隙循环,...2.很多代码移植性太差。 3.向左循环的时候。除用表格方式外,必须固定宽度,这样就不能动态的添加图片了。 基于以上我修改了代码但愿能给大家带来方便。
jquery.marquee.js demo及源文件
MARQUEE属性与用法,能实现无缝循环滚动文字,上下,左右都可以
juqery实现marquee的效果,手机端也可以使用,不卡顿
使用js实现了ie的marquee标签滚动功能, 使之能兼容FF,ie 并修正了纯中文横向滚动时的bug..
marquee标签实例
jquery.marquee.js可实现多个滚动效果 并且兼容各大主流浏览器
...<! - - ......<!> 跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 ...<marquee direction=’left’></marquee>向左卷动
HTML标签marquee实现滚动效果,实现文字在网页中漂移的代码。
marquee一款非常NB的插件可以实现无缝滚动上下左右都可以。使用简单操作容易
经典的通过Marquee标签来控制滚动有许多不尽人意的地方,这一点想必略通网页设计的人都知道。鄙人上传的此脚本(含Demo)是一个Marquee类,开放了几个接口轻松实现滚动的方向、延时、尺寸等参数的设置,对从事网页...
无间断滚动的新闻文章列表,兼容IE、Firefox和Opera,符合W3C标准。可作Marquee