0

我已经有了我的 javascript 来替换另一个 div，我只想知道当一个 div 被另一个 div 替换时如何放置淡入/淡出过渡。为了让您更好地了解我要完成的工作，当页面打开时，用户有 3 个选项。他们可以点击营销、遗产或婚礼链接，然后将他们带到相应的 div，询问他们是否需要工作样本或是否想与我们联系。正如我所说，它工作得很好，我只是希望 div 在单击第一个链接时淡入/淡出。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Legacy Media Calgary Service - Blooper Reel</title>
        <link href="css/chooseyourproject.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
            function MM_swapImgRestore() { //v3.0
             var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            function MM_preloadImages() { //v3.0
             var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
             var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }

            function MM_findObj(n, d) { //v4.01
             var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
              d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
             if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
             for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
             if(!x && d.getElementById) x=d.getElementById(n); return x;
            }

            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
           if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
        </script>

  <script type = "text/javascript">
function changeDiv(i){
   if(i==1) {
        document.getElementById("questions").style.display="none";
        document.getElementById("LegacyQuestions").style.display="block";
   } else if (i==2) {
        document.getElementById("questions").style.display="none";
        document.getElementById("MarketingQuestions").style.display="block";
   } else if (i==3) {
       document.getElementById("questions").style.display="none";
        document.getElementById("WeddingQuestions").style.display="block";
   }
}
</script>

</head>

<body onload="MM_preloadImages('images/first_legacy_on.png','images/first_marketing_on.png','images/first_weddings_on.png','images/First_samples_on.png','images/first_contactUs_on.png')">

<div id="body">

    <div id="topspace"></div>

  <div id="title"></div> 

    <div id="questions">
      <div id="whatWouldYouMake"></div>
        <div id="linkspace">
          <div id="leftlinks"></div>
            <div id="legacyLink"><a href="#" onclick="changeDiv(1)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Legacy','','images/first_legacy_on.png',1)"><img src="images/first_legacy_off.png" width="174" height="80" id="Legacy" /></a></div>
          <div id="marketinglink"><a href="#" onclick="changeDiv(2)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Link','','images/first_marketing_on.png',1)"><img src="images/first_marketing_off.png" width="218" height="80" id="Marketing Link" /></a></div>
          <div id="weddinglink"><a href="#" onclick="changeDiv(3)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/first_weddings_on.png',1)"><img src="images/first_weddings_off.png" width="222" height="80" id="Image3" /></a></div>
          <div id="rightLinks"></div>
            <div id="linkfooter"></div>
        </div>
      <div id="underLinks"></div>
  </div>

  <div id="LegacyQuestions">
        <div id="WouldYouLike"></div>
        <div id="secondLinkSpace">
            <div id="secondLeftSpace"></div>
            <div id="secondSamplesLink"><a href="www.legacymediacalgary.com/legacyprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LegacyProjects','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="LegacyProjects" /></a></div>
            <div id="secondContactUs"><a href="www.legacymediacalgary.com/legacycontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Legacy Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Legacy Contact Us" /></a></div>
            <div id="secondrightSpace"></div>
            <div id="secondLinkFooter"></div>
        </div>
   </div>

   <div id="MarketingQuestions">
        <div id="WouldYouLike"></div>
        <div id="secondLinkSpace">
            <div id="secondLeftSpace"></div>
            <div id="secondSamplesLink"><a href="www.legacymediacalgary.com/marketingprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Projects Link','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="Marketing Projects Link" /></a></div>
            <div id="secondContactUs"><a href="www.legacymediacalgary.com/marketingcontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Marketing Contact Us" /></a></div>
            <div id="secondrightSpace"></div>
            <div id="secondLinkFooter"></div>
        </div>
   </div>

   <div id="WeddingQuestions">
        <div id="WouldYouLike"></div>
        <div id="secondLinkSpace">
            <div id="secondLeftSpace"></div>
            <div id="secondSamplesLink"><a href="www.legacymediacalgary.com/weddingprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WeddingProjects','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="WeddingProjects" /></a></div>
            <div id="secondContactUs"><a href="www.legacymediacalgary.com/weddingcontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wedding Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Wedding Contact Us" /></a></div>
            <div id="secondrightSpace"></div>
            <div id="secondLinkFooter"></div>
        </div>
   </div>

</div>
</body>
</html>
4

1 回答 1

0

如果你想使用 vanilla javascript，试试这样的东西（我是从脑海中写出来的，虽然没有经过测试）：

function changeDiv(i) {
    var questions = document.getElementById("questions"),
        legacy = document.getElementById("LegacyQuestions"),
        marketing = document.getElementById("MarketingQuestions"),
        wedding = document.getElementById("WeddingQuestions");

    if(i==1) {
        var questionsOpacity = 1, // start value for questions opacity
            legacyOpacity = 0; // start value for legacy opacity

        (function fade_in_out() {
            questions.style.opacity = questionsOpacity -= 0.1; // decrease every 30 ms questions' opacity
            legacy.style.opacity = legacyOpacity += 0.1; // increase every 30ms legacy's opacity

            // If questions's opacity is smaller than 0 and legacy's opacity greater than 1
            // we should add display none on questions div and display block on legacy div
            if (questionsOpacity < 0 && legacyOpacity > 1) {
                questions.style.display = "none";
                legacy.style.display = "block";
            }
            // Is questions' opacity still greater than 0 or legacy's opacity smaller than 1?
            // Then it means we still can minimize questions div's opacity and increase legacy div's opacity...
            else
                setTimeout(fade_in_out, 30);
        })()
   } else if (i==2) {
        var questionsOpacity = 1,
            marketingOpacity = 0;

        (function fade_in_out() {
            questions.style.opacity = questionsOpacity -= 0.1;
            marketing.style.opacity = marketingOpacity += 0.1;

            if (questionsOpacity < 0 && marketingOpacity > 1) {
                questions.style.display = "none";
                marketing.style.display = "block";
            }
            else
                setTimeout(fade_in_out, 30);
        })()
    } else if (i==3) {
        var questionsOpacity = 1,
            weddingOpacity = 0;

        (function fade_in_out() {
            questions.style.opacity = questionsOpacity -= 0.1;
            wedding.style.opacity = weddingOpacity += 0.1;

            if (questionsOpacity < 0 && weddingOpacity > 1) {
                questions.style.display = "none";
                wedding.style.display = "block";
            }
            else
                setTimeout(fade_in_out, 30);
        })()
    }
}
于 2014-03-13T21:43:28.060 回答