Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.08.2017, 16:23
Интересующийся
Отправить личное сообщение для WhiteFox Посмотреть профиль Найти все сообщения от WhiteFox
 
Регистрация: 11.05.2017
Сообщений: 27

Настройка плавающего хедера
Доброго времени суток, помогите пожалуйста решить задачку.
Есть две картинки в хедере которые переливаются вертикальной линией.

1) Когда ставлю bg size 100% получается две целых картинки которые наезжают, а не половинки
2) не работает подстраивание под размер экрана
[JS]function heightDetect() {
		$(".s_home").css("height", $(window).height());
	};
	heightDetect();
	$(window).resize(function() {
		heightDetect();
	});[/JS]
и последнее, как этому задать границы сверху и снизу что бы не наезжал.
Вот сам код:
<div class="photoToggle">
			<div class="photoToggle-top"></div>
			<div class="photoToggle-toggle"></div>
			<div class="photoToggle-btn"></div>
		</div>

$('.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: 100%
height: 480px
position: absolute
.photoToggle-top
width: 40%
height: 610px
position: absolute
top: 0
left: 0
z-index: 2
background: url(../img/bg/head_bg2.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: 100%
height: 610px
position: absolute
top: 0
left: 0
z-index: 1
background: url(../img/bg/head_bg.jpg)
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2017, 17:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,820

фото до и после, полноэкраннная версия
WhiteFox,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style type='text/css'>
 html, body{
   height: 100%;
   margin: 0;
   padding: 0;
 }
.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.container > .top , .container > .bottom{
    height: 100%; width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(http://s00.yaplakal.com/pics/pics_preview/6/1/9/9965916.jpg);
}

 .container > .bottom{
    background-image: url(http://s00.yaplakal.com/pics/pics_preview/7/1/9/9965917.jpg);
 }

.container > .bar {

    height: 100%;
    width: 3px;
    position: absolute;
    top: 0px;
    left: 50%;
    cursor: move;
}

.container > .bar:after{
 cursor: move;
 width: 40px;
 height: 40px;
 position: absolute;
 top: 48%;
 left: -20px;
 content: "";
 border-radius: 20px;
 background-color: hsla(217, 89%, 61%, .5);
}

  </style>



<script>
window.addEventListener("DOMContentLoaded", function() {
    var mousedown = "mousedown",
        mousemove = "mousemove",
        mouseup = "mouseup";
    var touch = !!("ontouchstart" in window);
    if (touch) mousedown = "touchstart", mousemove = "touchmove", mouseup = "touchend";
    [].forEach.call(document.querySelectorAll(".container"), function(container) {
        var bottom = container.querySelector(".bottom"),
            bar = container.querySelector(".bar"),
            left, h = container.clientHeight,
            w = container.clientWidth;
        var init = function(e) {
            e.preventDefault();
            touch && (e = e.changedTouches[0]);
            left = e.clientX - this.offsetLeft;
            h = container.clientHeight;
            w = container.clientWidth;
            clip(left);
            container.addEventListener(mousemove, move, true);
            window.addEventListener(mouseup, stop, true)
        };
        var move = function(e) {
            touch && (e = e.changedTouches[0]);
            var x = e.clientX - this.offsetLeft;
            x = Math.min(w, Math.max(0, x));
            clip(x)
        };
        var clip = function(left) {
            bottom.style.clip = "rect(0," + left + "px," + h + "px,0)";
            bar.style.left = left + "px"
        };
        clip(w / 2);
        var stop = function(e) {
            container.removeEventListener(mousemove, move, true);
            window.removeEventListener(mouseup,
                stop, true)
        };
        container.addEventListener(mousedown, init, true);
        window.addEventListener("resize", function() {
        clip(container.clientWidth / 2);
}, true);
    })
});
</script>


</head>
<body>
  <div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="bar"></div>
</div>
 <div class="container">
    <div class="top" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/4/2/9/9965924.jpg)"></div>
    <div class="bottom" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/5/2/9/9965925.jpg)"></div>
    <div class="bar"></div>
</div>
</body>


</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Настройка webpack-dev-server --inline --hot для Angular 2 Giden Angular.js 1 23.05.2017 12:07
Настройка Gulp для компиляции Jade в PHP fenix_63 Общие вопросы Javascript 0 10.04.2017 14:41
Профессиональная настройка Яндекс Директ и Google Adwords Alex.Directolog Работа 0 28.08.2015 20:30
Настройка iframe demoniqus Общие вопросы Javascript 1 11.12.2012 09:35
настройка привилегий фф Zzet Firefox/Mozilla 1 04.03.2010 14:12