1

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

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

因此，例如，按钮可能是一个红色的微笑，当您将其翻转时，它会变成一个蓝色的微笑，然后下方会出现一个标题，上面写着“快乐”。然后，如果您翻转快乐，您将获得描述快乐意味着什么的文字图像。这是客户想要的方式，我使用文本图像的唯一原因是因为他的文本使用了独特的字体。

所以，只是为了向您展示我一直在尝试编写代码，而不是在没有工作的情况下寻找答案，这是我到目前为止的代码。它有点工作，但它不是很好，我对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;
4

1 回答 1

4

煎饼..

您应该考虑使用jQuery。

例如..

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

在功能内部，您还可以使用可见性并做任何您想做的事情。

于 2008-12-22T17:18:14.000 回答