Настройка плавающего хедера
Доброго времени суток, помогите пожалуйста решить задачку.
Есть две картинки в хедере которые переливаются вертикальной линией. 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) |
фото до и после, полноэкраннная версия
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> |
Часовой пояс GMT +3, время: 07:50. |