Question

我正在构建数字海报编辑器，因此我需要帮助将图像设置为div的背景外观。我不知道从哪里开始

我创建了一个div，其中有几张图片可供选择，还有一个只有div ID的空div。

这是我的图像div：

<div id="imgopt">
    <ol>
        <li>
            <img src="asset/img/template1.jpg">
        </li>
        <li>
            <img src="asset/img/template2.jpg">
        </li>
        <li>
            <img src="asset/img/template3.jpg">
        </li>
        <li>
            <img src="asset/img/template4.jpg">
        </li>
    </ol>
</div>

这是我的空部门：

<div id="designPoster">

</div>

基本上，我需要编写js代码或有关如何实现通过仅从div[id="designPoster"]中选择图像来设置空div[id="imgopt"]的背景图像的功能的一些指导。

Answer 1

如果您想在不使用jQuery的情况下使用Javascript进行操作，请按以下方法实现它。请注意，我更改了图像以使用示例。

var imageElts = document.querySelectorAll("#imgopt img");
var posterElt = document.querySelector("#designPoster");

for (var i = 0; i < imageElts.length; i++) {
  imageElts[i].addEventListener("click", changeBgImage);
}

function changeBgImage(e) {
  posterElt.style.backgroundImage = "url(" + e.target.src + ")";
  posterElt.style.backgroundSize = "contain";
  posterElt.style.backgroundRepeat = "no-repeat";
}

#imgopt img {
cursor: pointer;
width: 100px;
height: auto;
}

#designPoster {
width: 400px;
height: 157px;
background: #ccc;
}

<div id="imgopt">
  <ol>
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li> 
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li>
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li>
    <li>
     <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
   </li>
  </ol>
</div>

<div id="designPoster"></div>

祝你好运！

Answer 2

假设img src是您要设置的背景：

$('#imgpot img').onClick(function(){
    $('#designPoster').css('background-image', `url(${this.attr('src')})`);
});

这将为#imgpot中的每个图像标签添加一个事件处理程序，单击该事件处理程序会将background-image的{{1}}属性分配给单击的图像{{1} }属性。

Answer 3

这将满足您的要求...

$(function() {

   $('#imgopt img').on('click', function() {
     var imageSource = $(this).prop('src');
     $('#designPoster').css('background-image', 'url('+imageSource+')');  
     
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgopt">
  <ol>
    <li>
      <img  src="asset/img/template1.jpg">
    </li> 
    <li>
      <img  src="asset/img/template2.jpg">
    </li>
    <li>
      <img  src="asset/img/template3.jpg">
    </li>
    <li>
     <img  src="asset/img/template4.jpg">
   </li>
  </ol>
</div>

<div id="designPoster">

</div>

选择一个图像以bg-img的形式显示在div中

3 个答案: