1

Доброго времени суток, подскажите пожалуйста как реализовать смену фоновой картинки на сайте движением вертикальной линии введите сюда описание изображения

1 ответ 1

2

Очень даже просто, например вот так: https://jsfiddle.net/daniel217/5b88wn2h/7/

$(function() {
  $('.photoToggle').mousemove(function(e) {
    var pos = $(this).offset();
    var elem_left = pos.left;
    var elem_top = pos.top;
    // положение курсора внутри элемента
    var Xinner = e.pageX - elem_left;
    var Yinner = e.pageY - elem_top;
    $('.photoToggle-top').css('width', Xinner)
    $('.photoToggle-toggle').css({
      'left': Xinner - 20,
      'top': Yinner - 20
    })
  })
})
.photoToggle {
  width: 800px;
  height: 400px;
  position: relative;
}

.photoToggle-top {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-image: url(http://www.conceptcarz.com/images/Alfa%20Romeo/Alfa-Romeo-MiTo-Image-007-800.jpg);
}

.photoToggle-toggle {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: 180px;
  left: 380px;
  z-index: 3;
  border-radius: 20px;
  background-color: rgb(66, 134, 244);
}

.photoToggle-btn {
  width: 800px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url(http://premieropt.ru/site/themes/default/img/custom-img/4.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="photoToggle">
  <div class="photoToggle-top"></div>
  <div class="photoToggle-toggle"></div>
  <div class="photoToggle-btn"></div>
</div>

P.S. Стилизовать по вкусу.

2
  • Спасибо огромное!!!
    – White Fox
    10 авг 2017 в 20:37
  • @WhiteFox Если подошел мой ответ, отметьте его галочкой 10 авг 2017 в 20:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.