使用純JavaScript創建圖片瀏覽器的問題

我正在學習一門課程中JavaScript的基礎知識。這是因爲當我潛入不同的圖書館時，我想對JavaScript有很大的瞭解。使用純JavaScript創建圖片瀏覽器的問題

我已經成功創建了一個函數，該函數產生了一個隱藏着圖片的<div>（我用你看到的fadeIn函數欺騙了「純粹的」JavaScript）。

現在的問題是，我想要的功能是動態的，並且不止適用於一個元素。我現在不怎麼處理這個問題。

任何幫助或想法將不勝感激。

<div id="hiddenElement"> 
     <img src="#" alt="image" class="maxImg"/> 
    </div> 

    var hiddenElement = document.getElementById('hiddenElement'); 
    anchor.addEventListener('click', spawnImage, false); 


    function spawnImage() { 
      $(hiddenElement).fadeIn('slow', function() { 
       hiddenElement.style.display = 'block'; 
      });

現在看起來是這樣的： http://oscarlandstrom.se/javascript/pic.html

來源

2011-09-20 Oscar

你的意思是要統一這個功能，那麼你可以通過DIV和背部ID作爲功能parametrs：

function spawnImage(divId, backId) { 
      $(divId).fadeIn('slow', function() { 
       document.getElementById('divId').style.display = 'block'; 
      }); 
      $(backId).fadeIn('slow', function() { 
       document.getElementById('backId').style.display = 'block'; 
      });

當加載頁面調用類似這樣的：

spawnImage(fistDivId, backId); 
spawnImage(secondDivId, backId);

來源

2011-09-20 10:22:42 Kate

林產卵與事件監聽的圖像。而且我希望它不僅僅適用於一個元素。 addEventListener（'click'，spawnImage，false）; – Oscar

所以你可以設置CL屁股=「產卵」的所有元素，你想你的功能保持。（class =「spawn」 - 它只是用於標記元素的空類）。那麼你應該像加載事件設置：

$(document).ready(function() { 
    var spawnedElamants = getElementsByClassName("spawn"); 
    for(var i=0; i<spawnedElamants.length; i++) 
    { 
    spawnImage(spawnedElamants[i].id, backId); 
    } 
});

來源

2011-09-20 10:44:53 Kate

我會盡力使這項工作。否則，我會回來提出進一步的問題。感謝您的幫助和快速回復:) – Oscar

檢查：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="sheet.css" /> 
     <script src="js.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    </head> 
    <body> 
     <div id="bkgFade"></div> 
     <div id="container"> 
      <div class="imgWrap"> 
       <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor" class="minImg"/> 
      </div> 
      <div class="imgWrap"> 
       <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor2" class="minImg"/> 
      </div> 
     </div> 
     <div id="hiddenElement"> 
      <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" class="maxImg"/> 
     </div> 
    </body> 
</html> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var minImgs = document.getElementsByClassName("minImg"); 
     var maxImgs = document.getElementsByClassName("maxImg"); 
     var bkgFade = document.getElementById('bkgFade'); 
     for(var i=0; i<minImgs.length; i++) 
     { 
      minImgs[i].addEventListener('click', spawnImage, false);  
     } 
     for(var i=0; i<maxImgs.length; i++) 
     { 
      maxImgs.addEventListener('click', despawnImage, false); 
     } 
     } 
    ) 

    function spawnImage() { 
     $(hiddenElement).fadeIn('slow', function() { 
      hiddenElement.style.display = 'block'; 
     }); 

     $(bkgFade).fadeIn('slow', function() { 
      bkgFade.style.display = 'block'; 

     }); 
    } 

    function despawnImage() { 
     $(hiddenElement).fadeOut('slow', function() { 
      document.getElementById('hiddenElement').style.display = 'none'; 
     }); 
     $(bkgFade).fadeOut('slow', function() { 
      document.getElementById('bkgFade').style.display = 'none'; 

     }); 
    } 
</script>

來源

2011-09-20 11:53:47 Kate

如果我有不同的圖像，我如何通過最佳實踐將它們置於hiddenElement中？ – Oscar

可以在一定程度上把maxImgs放入hiddenElement中？ – Oscar

由於「hiddenElement」 - div被隱藏，所以無論您如何在其中放置圖像。 '

'。對於具有類「maxImg」的所有圖像，將設置單擊監聽器 - despawnImage。 – Kate

使用純JavaScript創建圖片瀏覽器的問題

回答

相關問題