Два события для фонового изображения - PullRequest
Новая
       5

Два события для фонового изображения

1 голос
/ 07 февраля 2020

Я пытаюсь создать что-то, чтобы изменить обои, нажимая на картинку или нажимая на кнопку.

Отдельно это работает, но когда я нажимаю на миниатюру, обои меняются и когда я нажимаю на кнопку I выберите изображение, и все в порядке, но после того, как если я захочу снова щелкнуть по миниатюре, появится проблема, если кто-то может мне помочь, это было бы очень признательно.

Я создал пример 

$('ul#images li').click(function(e){
  $('ul#images li').each(function(){
      $(this).removeClass('active');
  });  
    $(this).addClass('active');
    var source = $(this).children('img').attr('src');
    $('.outer').css('background', 'url('+source+')');
});

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});
function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
}

1 Ответ

0 голосов
/ 10 февраля 2020

нажатие на картинки устанавливает фон для .outer div, кнопка устанавливает фон для тега изображения. Почему бы не установить кнопку для фона .outer div? Затем удалите тег изображения вообще. Я думаю, что тогда это будет работать так, как вы ожидаете, пример ниже.

В приведенном ниже примере ... Я изменил настройку background на настройку backgound-image, поэтому настройка не перекрывает другой фон css . 

$('ul#images li').click(function(e){
  $('ul#images li').each(function(){
      $(this).removeClass('active');
  });  
    $(this).addClass('active');
    var source = $(this).children('img').attr('src');
    $('.outer').css('background-image', 'url('+source+')');
});
 
$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});
function imageIsLoaded(e) {
    //$('#myImg').attr('src', e.target.result);
    $('.outer').css('background-image', 'url('+e.target.result+')');
}
*,  *:before, *:after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  color: white;
  font-family: 'Open Sans', sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
}

ul, ol {
  list-style-type: none;
}

a,
a:visited, 
a:focus {
  text-decoration: inherit;
	font-weight: inherit;
	color: inherit;
}

.outer {
  background: black;
  background: url('https://hdfondsdecran.com/image/201609/71/nuage-vue-de-dessus-multicolore-merveilleux.jpg');
  background-position: center center;
  @include transform(scale(1.1));
  background-size: cover;
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.overlay {
  background: rgba(black,0.6);
  height: 100%; width: 100%;
  position: absolute;
  z-index: 2;
  left:0;
  top:0;
  background-repeat: repeat;
}

h1 {
  font-weight: 700;
  font-size: 7em;
  font-size: 8vw;
  text-transform: uppercase;
  position: relative;
}

h2 {
  font-style: italic;
  font-weight: 300;
  font-size: 1.1em;
  font-size: 1.5vw;
}

.inner {
  position: relative;
  z-index: 3;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-shadow: 0 0 20px rgba(black,0.6);
}

button {
  background: transparent;
  border: 2px solid white;
  margin: 5px;
  font-size: 0.8em;
  font-size: 1.5vw;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: 400;
  cursor: pointer;
  @include transition(all 0.4s ease);
}

button:hover {
  background: white;
  color: black;
}

ul#images li {
  display: inline-block;
  margin: 10px;
  border: 2px solid white;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.5;
}

ul#images li:hover {
  opacity: 1;
}

ul#images li.active {
  opacity: 1;
}

ul#images li img {
  width: 100px;
  height: 50px;
  display: block;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
<div class="overlay">
  </div>
    <div class="inner">
      <br><br><h2>Change Background Image:</h2><br>
      <ul id="images">
        <li class="active"><img src="https://img.gadgethacks.com/img/86/37/63601592852769/0/get-ios-10s-new-wallpaper-any-phone.1280x600.jpg" /></li>
        <li><img src="https://www.itl.cat/pngfile/big/2-20588_ios-wallpaper-iphone-wallpaper-hd-desktop.jpg" /></li>
        <li><img src="https://i.pinimg.com/originals/42/65/79/426579e96e9333ed9518c2fd9d3e5482.jpg" /></li>
        <li><img src="https://i.pinimg.com/originals/a1/4d/e0/a14de021c4fa8049d2d798d5b98d7419.jpg" /></li>
        <input type="file" id="uploader" />
          <label for="uploader">Parcourir</label>
      </ul>
    </div>  
</div>
...