Question

我有4个具有相同类名和不同背景图像的div。单击四个图像之一时显示的隐藏div。如何在显示的div中添加单击的div的背景图像？我不想为每张图片都写一个函数。

                <a href="#"><div onClick="show2(this.style)"class="img" style="background-image:url('css/images1/img/img1.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.style)"class="img" style="background-image:url('css/images1/img/img2.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.style)"class="img" style="background-image:url('css/images1/img/img3.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.style)"class="img" style="background-image:url('css/images1/img/img4.jpg');background-size:90% 90%;")></div></a>
 <div class="gallery"></div>
<script>
    function show(){
        var x=document.getElementsByClassName('gallery')[0];
        x.style.display="block";    
           };
</script>

Answer 1

需要包含iFrame以在div标签中显示图像。查找解决方案here

Answer 2

JS：

 images=document.getElementsByTagName('img');
   var x=document.getElementsByClassName('gallery')[0];

    for(i=0;i<images.length;i++) {

    images[i].addEventListener("click", function(){  
            src=this.src;

            x.style.display="block";  
       x.style.backgroundImage="url('"+src+"')";}, false);
    }

HTML：

<a href="#"><img class="img" src="http://placehold.it/100x100"></a>
 <a href="#"><img class="img" src="http://placehold.it/200x100"></a>
 <a href="#"><img class="img" src="http://placehold.it/300x100"></a>
 <a href="#"><img class="img" src="http://placehold.it/400x100"></a>
 <div class="gallery"></div>

演示：http://jsfiddle.net/h7hqfL4d/1/

将背景图像插入另一个div

2 个答案: