使用javascript事件处理程序和函数在firefox中不触发CSS3转换
我已经建立了一个画廊一个月左右了,布局很简单,左侧有一个缩略图菜单,右侧有一个画廊预览。当您单击已加载的缩略图时,它会触发一个mousdown事件,该事件会折叠缩略图区域并将图库预览扩展到完整大小(所有操作都使用CSS3转换)。到目前为止,除了我创建了一个omouseover事件,当您将鼠标悬停在缩略图上时,它会激活该函数外,其他一切都运行得很好。该函数将重新绘制gallery preview div(“pics”)的内容,并创建三个图像,其中两个是帧中的前一个图像,一个是帧中的下一个图像(在中间)。在innerHTML中,它将CSS样式“left:”设置为724px或-724px,具体取决于它是向前还是向后。然后,当生成所有这些html的函数完成时,负责监视开关的函数将“style.left=”设置为“0px”。所有这些都可以在safari和chrome中使用。但由于某些原因,firefox拒绝设置过渡动画!我已经研究这个小故障好几天了,什么也没想到,在另一个版本中,我可以在错误的时间过渡到fire。但在firefox中发生的只是一个从724px到0px的无过渡变化。这是我的代码片段 这将切换缩略图图像并激活转换图像的功能使用javascript事件处理程序和函数在firefox中不触发CSS3转换,javascript,css,transform,Javascript,Css,Transform,我已经建立了一个画廊一个月左右了,布局很简单,左侧有一个缩略图菜单,右侧有一个画廊预览。当您单击已加载的缩略图时,它会触发一个mousdown事件,该事件会折叠缩略图区域并将图库预览扩展到完整大小(所有操作都使用CSS3转换)。到目前为止,除了我创建了一个omouseover事件,当您将鼠标悬停在缩略图上时,它会激活该函数外,其他一切都运行得很好。该函数将重新绘制gallery preview div(“pics”)的内容,并创建三个图像,其中两个是帧中的前一个图像,一个是帧中的下一个图像(在中
document.getElementById(thumbid).onmouseover = function() {
num = parseInt(this.name);
this.src = image[1][num].src;
this.style.cursor = "pointer";
switcher(num, null);
}
这是一个计算如何切换图像的函数,它设置一个计时器(见下面的变量),在图像完成转换之前,该计时器接受输入而不更改图像:
function switcher (num, direction) {
if (direction == 'left') {
num--;
} else if (direction == 'right') {
num++;
}
if (num < 0) {
num = fullcount-1;
} else if (num == fullcount) {
num = 0;
}
if (intransit == false) {
drawgallery(num);
document.getElementById("photos").style.left = "0px";
intransit = true;
transittimer = setTimeout("intransit = false; if (transitnumber != null) { switcher(transitnumber, null); transitnumber = null; }", 450);
} else {
transitnumber = num;
}
}
var transittimer = null;
var intransit = false;
var transitnumber = null;
功能切换开关(数量、方向){
如果(方向=‘左’){
num--;
}否则如果(方向=‘右’){
num++;
}
if(num<0){
num=fullcount-1;
}else if(num==fullcount){
num=0;
}
如果(在途==假){
抽丝廊(num);
document.getElementById(“照片”).style.left=“0px”;
在途=真实;
transitimer=setTimeout(“intransit=false;if(transitnumber!=null){switcher(transitnumber,null);transitnumber=null;}”,450);
}否则{
transitnumber=num;
}
}
var transittimer=null;
var内部=假;
var transitnumber=null;
这是绘制图库的实际元素,开始变量变为左侧变量。然后在DrawGallery功能完成后,切换器将div的“left”设置为0px,这在除firefox之外的所有浏览器中都会转换:
function drawgallery(num) {
start = 724;
if (num > curpos) {
} else {
start = "-"+start;
}
table = "<div id=\"photos\" style=\"position:absolute; height:470px; top:0px; left:"+start+"px;\">";
//first square drawn at an X of 0 so that the image remains the same but the drawer can slide over.
table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:-724px; width:724px; height:470px;\">";
if (curpos <= (totalloaded-1)) {
table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
} else {
table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
}
table += "</div>";
table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:724px; width:724px; height:470px;\">";
if (curpos <= (totalloaded-1)) {
table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
} else {
table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
}
table += "</div>";
/////////////////////////////
//second square drawn at an X of either negative or positive 724 so that the image remains the same but the drawer can slide over.
table += "<div id=\"i"+orderarr[2][num]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:0px; width:724px; height:470px;\">";
if (curpos <= (totalloaded-1)) {
table += "<img id=\"i"+num+"\" src=\"image.php?field=pics&id="+orderarr[2][num]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
} else {
table += "<div id=\"iloader"+orderarr[2][num]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
}
table += "</div>";
table += "</div>";
document.getElementById("pics").innerHTML = table;
curpos = num;
}
函数绘图库(num){
开始=724;
如果(num>curpos){
}否则{
start=“-”+启动;
}
表=”;
//第一个正方形以0的X绘制,这样图像保持不变,但抽屉可以滑动。
表+=”;
如果(curpos尝试为转换添加超时。超时是转换属性中的最后一个属性
-moz过渡:所有1s线性1s
此时您的元素应该是可见的,因此可见性和显示属性应该是块和可见的。您可以使用不透明度:0(过滤器:alpha(不透明度=0)来隐藏ie)
假设这会有帮助。你到底为什么不为此使用模板引擎?(例如)说明您正在使用的FF版本非常重要。FF3.5及更高版本可能不支持您正在使用的某些功能。此外,您能够在哪些chrome和safari版本上正确显示此功能?您发布的代码不包含对CSS3转换或转换的单一引用?请发布转换的相关代码/过渡。这只是一个偶然的机会,但是阅读您的描述,我想您可能忘记了为mozilla添加供应商前缀-moz transform
或-moz transition
?您可以为此创建一个小提琴吗?CSS3转换在哪里?如果您只是更改“left”属性,那么这既不是CSS3问题,也不是转换/动画问题。相反,它可能是javascript问题,也可能是firefox/css问题。