X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Слои и перетягивание
delegree
delegree
Topic Starter сообщение 1.8.2015, 18:43; Ответить: delegree
Сообщение #1


Доброго вечера. Помогите пожалуйста разобраться с реализацией задумки (составлением алгоритма) :rolleyes:

Нужно реализовать перетягивание при помощи кнопки с постепенным изменением видимости блоков.

Для наглядности набросал:

[IMG]http://screenshot.ru/upload/images/2015/08/01/d4f37b8edc1b7150.png[/IMG]

Есть блок 1 и блок 2
Нужно установить их на одном месте (чтобы лежали друг на друге), и допустим синий будет на слой выше красного.
На самом верхнем слое располагается кнопка для перетягивания влево-вправо.
Как только кнопка зажимается и тащится влево или вправо - width синего блока уменьшается/увеличивается, тем самым прикрывая красный блок.
Сама позиция кнопки соответственно тоже перемещается.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 3.8.2015, 14:32; Ответить: Degradator
Сообщение #2


Тут вопрос в том как сделать dragNDrop. Для этого есть уже тысяча и одна реализация, посмотри например

http://madrobby.github.io/scriptaculous/sortable-lists-demo/

https://jqueryui.com/draggable/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
karssen
karssen
сообщение 3.8.2015, 17:51; Ответить: karssen
Сообщение #3


Ток такой вариант могу предложить. Есть еще вариант сделать блоки resizble но как не придумал)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<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>
<style>
#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>
</head>
<body>
<div id="wrapper">
<div class='vertical1'>

</div>
<div class='vertical2'>

</div>
<div class="separator">
</div>
</div>


</body>
</html>


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) слои
 4 dimjan4 6924 30.7.2008, 19:50
автор: -TiP-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 4:00

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet