Как мне переходить между двумя моими изображениями при нажатии? - PullRequest
Новая
       3

Как мне переходить между двумя моими изображениями при нажатии?

1 голос
/ 14 июня 2019

У меня есть изображение, которое меняется при нажатии.Я сделал это, изменив src изображения при нажатии.Я пытаюсь добавить плавный переход между двумя изображениями при нажатии.

Я попытался поместить два изображения друг на друга и изменить непрозрачность на верхнем изображении при нажатии, но я не смог работатькак изменить непрозрачность в JavaScript, поэтому я отказался от этой идеи на случай, если есть более простой метод. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.slidecontainer {
  width: 100%;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}

.slider {
  -webkit-appearance: none;
  width: 100px;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  position: relative;
}



.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer:hover, img:hover + .slidecontainer {
  opacity: 1;
}
</style>

<img id="Lightning" src="https://static.wixstatic.com/media/38d0c2_1f8b71c0bf644137ab295604ceaaecaa~mv2.png" height="100" width="100">

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="volume">
</div>

<audio id="Thunder" loop>
   <source src="http://music.wixstatic.com/preview/38d0c2_064b409cb5594774ab3c1fa24f9afa2f-128.mp3" type="audio/wav" />
</audio>

<script type="text/javascript">

function LightningChange() {
if (Lightning.src == "https://static.wixstatic.com/media/38d0c2_1f8b71c0bf644137ab295604ceaaecaa~mv2.png") {
    Lightning.src = "https://static.wixstatic.com/media/38d0c2_5609c3592b894208b679ce8641031ae8~mv2.png"; 
} else {
    Lightning.src = "https://static.wixstatic.com/media/38d0c2_1f8b71c0bf644137ab295604ceaaecaa~mv2.png";
}}

document.getElementById("Lightning").onclick = function() {
    LightningChange()
    var thunderAudio = document.getElementById("Thunder");
    if (thunderAudio.paused) thunderAudio.play();
    else thunderAudio.pause();
};

volume.addEventListener("mousemove", thunderVolume);

function thunderVolume(){
    document.getElementById("Thunder").volume = document.getElementById("volume").value / 100;
}
    </script>

1 Ответ

3 голосов
/ 14 июня 2019

Я сделал это, поместив два изображения друг на друга и изменив их стили при нажатии 

<style>
    .imageContainer{
         position: absolute;
     }

.hide{
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s, visibility .5s;
}

.visible{
  visibility: visible;
  opacity: 1;
}
</style>


<div id="Lightning" class="container">
    <img class="imageContainer visible" src="https://static.wixstatic.com/media/38d0c2_1f8b71c0bf644137ab295604ceaaecaa~mv2.png" height="100" width="100">
    <img id="secondImg" class="imageContainer hide"   src="https://static.wixstatic.com/media/38d0c2_5609c3592b894208b679ce8641031ae8~mv2.png" height="100" width="100">
</div>


<script type="text/javascript">
document.getElementById("Lightning").onclick = function() {
   document.getElementById("secondImg").classList.add("visible");
};
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...