小编Sco*_*ton的帖子

我已经建立了一个月左右的画廊,布局很简单,左边是缩略图菜单,右边是画廊预览.当您单击已加载的缩略图时,会触发一个mousdown事件,该事件会折叠缩略图区域并将图库预览扩展为完整大小(全部使用CSS3变换).到目前为止,一切都很完美,除了我创建了一个omouseover事件,当你将鼠标悬停在缩略图上时激活该功能.该函数重绘画廊预览div("pics")的内容并创建三个图像,两个是帧中的前一个图像,一个是帧中的下一个图像(在中心).在innerHTML中,它将CSS样式"left:"设置为724px或-724px,具体取决于它是向前还是向后.然后当生成所有这个html的函数完成时,负责监视开关的函数将"style.left ="设置为"0px".所有这些都适用于safari和chrome.但由于某些原因,firefox拒绝为过渡动画!我已经研究了这个故障几天,没有提出任何问题,在另一个版本中我可以在错误的时间过渡到火.但是在firefox中发生的所有事情都是从724px到0 px的无转换变化.这是我的代码片段.

这会切换缩略图图像并激活转换图像的功能

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 != …