点击放大图片。 JavaScript、CSS 和 HTML答案

【问题标题】：Making a picture enlarge on click. JavaScript, CSS and HTML点击放大图片。 JavaScript、CSS 和 HTML
【发布时间】：2015-06-11 18:43:55
【问题描述】：

在这里找到了一个指南，可以通过点击放大图片，但它不是很有效。当我点击放大图片时，小的会留在前面。

我把它放在我的 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';}

当我有多张图片时，我应该采取不同的做法吗？

【问题讨论】：

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

标签： javascript html css image-enlarge

【解决方案1】：

看起来很棒，您可以按需加载图片！也许如果您已经使用过 jQuery，您应该添加带有淡入的动态，例如 http://api.jquery.com/category/effects/

【讨论】：

【解决方案2】：

我遇到了同样的问题，试试这个对我有用的编辑

            <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>

【讨论】：