点击放大图片。 JavaScript

问题描述：

在这里找到了一个指南，使图片放大点击，但它不是很工作。当我点击放大的图像时，小的留在前面。点击放大图片。 JavaScript

我把这个在我的html：

  <div class="bild1"><script type="text/javascript" src="funktions.js"></script> 
      <img src="bilder/3D.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/3D_stor.png');"> 
      <div id="largeImgPanel" onclick="hideMe(this);"> 
      <img id="largeImg" style="height: 100%; margin: 0; padding: 0;"> 
      </div> 
     </div> 

     <div class="bild2"> 
      <img src="bilder/TopGame.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/TopGame_stor.png');"> 
      <div id="largeImgPanel" onclick="hideMe(this);"> 
      <img id="largeImg" style="height: 100%; margin: 0; padding: 0;"> 
      </div> 
     </div> 

     <div class="bild3"> 
      <img src="bilder/almanacka.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/Almanacka_stor.png');"> 
      <div id="largeImgPanel" onclick="hideMe(this);"> 
      <img id="largeImg" style="height: 100%; margin: 0; padding: 0;"> 
      </div> 
     </div>

CSS：

#largeImgPanel { 
text-align: center; 
visibility: hidden; 
position: fixed; 
z-index: 100; 
top: 0; left: 0; 
width:100%; 
height:100%; 
background-color: rgba(100,100,100, 0.5);}

的javascript：

 function showImage(imgName) { 
document.getElementById('largeImg').src = imgName; 
showLargeImagePanel(); 
unselectAll(); 

} 
function showLargeImagePanel() { 
document.getElementById('largeImgPanel').style.visibility = 'visible'; 

} 

function unselectAll() { 
if(document.selection) document.selection.empty(); 
if(window.getSelection) window.getSelection().removeAllRanges(); 

} 

function hideMe(obj) { 
obj.style.visibility = 'hidden';}

我应该采取不同的方式，当我有多个图片？

看起来不错http://jsfiddle.net/9qd1f1jd /。我猜你的一些风格有冲突。 – dfsq

答

它看起来不错，你加载图片作为需求！也许如果你已经使用jQuery的，你应该例如http://api.jquery.com/category/effects/

答

动态添加淡入我有同样的问题试试这个编辑它为我工作

  <div class="bild1"><script type="text/javascript" src="funktions.js"></script> 
     <img src="bilder/3D.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/3D_stor.png');"> 
    </div> 

    <div class="bild2"> 
     <img src="bilder/TopGame.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/TopGame_stor.png');"> 
    </div> 

    <div class="bild3"> 
     <img src="bilder/almanacka.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/Almanacka_stor.png');"> 
     <div id="largeImgPanel" onclick="hideMe(this);"> 
     <img id="largeImg" style="height: 100%; margin: 0; padding: 0;"> 
     </div> 
    </div>

点击放大图片。 JavaScript

相关推荐