| karssen | 03.08.2015 16:13 |
Странно. Здесь работает все как надо. Но если запускать код в браузере то получается вот так 
Изменение видимости наложенных друг на друга блоков в зависимости от сепаратора
Доброго времени суток. Может кто сталкивался с уже готовыми решениями или у кого то есть мысли как это реализовать. Есть 2 блока абсолютно-спозиционированных один поверх другого. Есть вертикальная линия сепаратор, при перемещении сепаратора вдоль оси Х пространство слева от него должно быть заниматься блоком, который находится снизу, а пространство справа оставаться блоком , который находится сверху, до тех пор пока сепаратор не достигнет правого края.
Разметка есть здесь http://jsfiddle.net/nafz6jr2/ |
картинки с сепаратором
karssen,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
#wrapper{
width:400px;
margin:0 auto;
position:relative;
}
.vertical1 {
width:400px;
height:200px;
background-color:red;
position:absolute;
background-image: url(http://javascript.ru/img/ws_1.png);
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
}
.vertical2 {
width:400px;
height:200px;
background-color:blue;
position:absolute;
right: 0;
background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
.separator{
width:5px;
height:200px;
background-color:black;
position:absolute;
z-index:2;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>
window.onload=function(){
$(document).ready(function(){
$('#wrapper').mousemove(function(e){
var sep = $(this).children('.separator');
var left = $('#wrapper').offset().left;
var top = $('#wrapper').offset().top;
if(e.clientX >= left && e.clientX <= (left + 395)){
sep.offset({top:top, left:e.clientX});
var a = 400 - (e.clientX - left)
$('.vertical2').width(a)
}
});
})
}
</script>
</head>
<body>
<div id="wrapper">
<div class='vertical1'>
</div>
<div class='vertical2'>
</div>
<div class="separator">
</div>
</div>
</body>
</html>
|
Цитата:
http://novice2ninja.ru/ninja-book/ch.../splitter.html |
Странно. Здесь работает все как надо. Но если запускать код в браузере то получается вот так
|
karssen,
css смотрите |
спасибо
|
| Часовой пояс GMT +3, время: 22:58. |