Доброго времени суток, подскажите пожалуйста как реализовать смену фоновой картинки на сайте движением вертикальной линии
1 ответ
Очень даже просто, например вот так: 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. Стилизовать по вкусу.