Question

我创建的网站可以在这里找到代码：https://jsfiddle.net/7y373j8x/2

我创建了一个单击“投资组合”时出现的框。（该框名为“object2”）。

我想在此框中插入PNG张图片。有些人建议我做jQuery slider，但我不想要slideshow。我希望图像彼此相邻（如thumbnails），然后用户可以点击图像，它应该变得更大。

HTML：

<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map" />


<div class="container">
    <p>About me</p>
    <div id="portfolio" onclick="show();">Portfolio</div>
    <p>Contact me</p>
    <div id="object2" onclick="show();">
    </div>
</div>

CSS：

#map {
    background-attachment: fixed;
}

.container {
    color: yellow;
    position: fixed;
    top: 54%;
    left: 58px;
    font-family: normal normal 15px Calibri;
}

#object2 {
    border-radius: 15px 50px;
    background: black;
    position: fixed;
    bottom: 200px;
    right: 400px;
    width: 650px;
    height: 350px;
    cursor: pointer;
    display: none;
    z-index: 999;
    opacity: 0.4;
}

JavaScript的：

function show() {
    document.getElementById("object2").style.display = "block";
}

Answer 1

你的函数不起作用的原因是因为onclick在页面范围内运行，所以它不能执行它之外的任何函数。

如果我在相同的范围内移动脚本，它将起作用，如您所见：

JavaScript jsfiddle： https://jsfiddle.net/AndrewL32/saTfR/60/

（我已将style.display = "block"替换为.style.cssText = 'display: block';）

jQuery方法

如果您对使用jQuery感兴趣，可以使用js修改css属性，这是一种更简洁的jQuery方法：

$("#portfolio").click(function(){
    $("#object2").css("display", "block");
});

jQuery jsfiddle： https://jsfiddle.net/AndrewL32/saTfR/58/

Answer 2

您可以使用javascript或jquery附加图片。

更新您的show()方法。

function show(){        
    document.getElementById("object2").style.display = "block";
    var image = new Image();
    image.src = 'https://placehold.it/350x150';
    var image1 = new Image();
    image1.src = 'https://placehold.it/200x100';
    $('#object2').html('');
    $('#object2').append(image);
    $('#object2').append(image1);
}

此处有更新的 JSFIDDLE 。希望它有所帮助。

在使用CSS创建的框中插入PNG图像？

2 个答案: