Question

我正在尝试使用Javascript进行多重翻转。我知道有很多人说使用css，但这次将在Javascript中完成。

无论如何，我对这个翻转层次结构遇到了很多麻烦。我有一个带有五个按钮的按钮图像导航。当您将鼠标悬停在其中一个按钮上时，该按钮会更改颜色，并且该按钮下方会显示一个标题。下一部分是用户必须将鼠标悬停在标题上，然后出现另一个图像，其中包含描述标题的文本。

因此，例如，按钮可能是一个红色的微笑，当你翻转它时，它会变成一个蓝色的微笑，然后在下面显示一个标题为Happy的标题。然后，如果你快乐翻滚，你会得到一个描述快乐意味着什么的文字图像。这是客户想要它的方式，也是我使用文本图像的唯一原因，因为他的文本使用了一种独特的字体。

所以，只是为了向您展示我一直在尝试对此进行编码而不是在没有工作的情况下寻找答案，这是我的代码到目前为止。它有点工作，但它不是很好，我不熟悉javascript。

function rollover()
{
  var images = document.getElementsByTagName("img");
  var roll = new RegExp("roll");
  var header = new RegExp("_(?=roll)");
  var text = new RegExp("_(?=text)");
  var simple = new RegExp("simple");
  var currentRoll;
  var preload = [];
  var fileLoc = "images/rollovers/";

  for ( var i=0; i<images.length; i++)
  {
    if (images[i].id.match(roll))
    {
      currentRoll = images[i].id;
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      { 
        var button = this.id;
        this.src = fileLoc + this.id + "_over.gif";

        for ( var i=0; i<images.length; i++)
        {
          if (images[i].id.match(header))
          {
            var temp = images[i].id;
            if (images[i].id == "_" + this.id + "_header")
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].style.visibility="visible";
              images[i].onmouseover = function() 
              {
                  for ( var i=0; i<images.length; i++)
                  {
                    if (images[i].id.match(text))
                    {
                      var temp = images[i].id;
                      images[i].src = fileLoc + this.id + "_text.gif";
                      images[i].style.visibility="visible";
                      break;

                    }
                  }  
              }
              break;
            }
            else
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].setAttribute("id", 
              images[i].style.visibility="visible";
              images[i].onmouseover = function() 
              {
                for ( var i=0; i<images.length; i++)
                {
                  if (images[i].id.match(text))
                  {
                    var temp = images[i].id;
                    images[i].src = fileLoc + this.id + "_text.gif";
                    images[i].style.visibility="visible";
                    break;

                  }
                }  
              }
              break;
            }
          }
        }
        images[i].onmouseout = function() 
        { 
          this.src = fileLoc + this.id + "_org.gif"; 
          for ( var i=0; i<images.length; i++)
          {
            if (images[i].id.match(header))
            {

              images[i].style.visibility="hidden"
            }
          } 

        }
      }  
    }

    else if (images[i].id.match(simple))
    {
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      {
        this.src = fileLoc + this.id + "_over.gif";  
      }
      images[i].onmouseout = function()
      {
        this.src = fileLoc + this.id + "_org.gif";
      }
    }
  }
}

window.onload = rollover;

Answer 1

Cripes ..

您应该考虑使用jQuery。

例如......

$(
    function() {
        $("img.rollover").hover(
            function() {
                this.src = this.src.replace("_org","_over");
            },
            function() {
                this.src = this.src.replace("_over","_org");
            }
        );
    }
)

在功能内部，您还可以使用可见性并执行其他任何操作。

Javascript多个翻转

1 个答案: