30.08.2017, 20:13
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
|
Выезжающий, спрятанный блок при наведении
Ссылка прикреплена к левому краю экрана и зафиксирована.
При наведении на нее, спрятанный блок должен выезжать вправо.
Подобным способом реализовывают формы обратной связи и рекламу.
Как осуществить подобное посредством JavaScript?
|
|
30.08.2017, 23:11
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Зафиксирована относительно окна или документа?
|
|
31.08.2017, 06:46
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
|
А окно это разве не документ? Пусть будет документа, дальше я его сам прилеплю к окну.
|
|
31.08.2017, 06:46
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
Сообщение от j0hnik
|
|
Зафиксирована относительно окна или документа?
|
А окно это разве не документ? Пусть будет документа, дальше я его сам прилеплю к окну. |
|
31.08.2017, 07:57
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Полагаю, что всетаки окна
<html>
<head>
<style>
body{
margin: 0;
height: 5000px;
}
.block{
width: 150px;
height: 150px;
position: fixed;
left: -150px;
top: 40px;
background-color: red;
transition: .5s;
}
.block.active{
left: 0px;
}
.link{
display: block;
position: fixed;
top: 22px;
background-color: #777;
}
</style>
</head>
<body>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Дал над, снова пунктуация до ручеек от всех, коварный возвращайся заглавных дорогу города но безорфографичный родного текстами рыбного вопроса которой за которое, текстов она оксмокс его. На берегу назад взобравшись однажды своих океана даже выйти лучше, ipsum журчит его точках по всей последний переписывается города переулка несколько первую домах путь агенство которое. Его, продолжил буквоград заглавных жаренные переписали текст своих свой безопасную образ океана! Первую запятой коварных рукописи, своего образ путь, ipsum парадигматическая власти раз? Которое ведущими языком но единственное ручеек, однажды текстами точках. Вскоре переписали свой которое рот! О рекламных меня по всей жизни? За, безопасную рукописи сих, раз парадигматическая образ правилами использовало, диких своих мир вопрос! То приставка, снова рукопись власти своего инициал. Деревни прямо злых языкового продолжил, путь сбить города о знаках он. Скатился дороге ее продолжил языком осталось над большой текст рыбными языкового своего. Щеке текстов, заманивший которой продолжил вопрос диких всеми, себя до текст имени строчка несколько но, свою! Первую грустный себя семь текстов последний большого залетают рукопись ведущими. Подзаголовок переписали дорогу прямо по всей своих за, текстами дороге запятых жаренные своего ipsum текстов то сих взгляд большой ее журчит. Там, вопрос это скатился заголовок, снова точках над, жизни речью великий безопасную семь ipsum ручеек? Текста предупреждал это несколько оксмокс подпоясал над своих языкового. Составитель снова на берегу, это, lorem ручеек мир, вопрос, безорфографичный своих свою там заглавных рыбными его подпоясал переписали океана вопроса сих парадигматическая путь? Рукопись предложения жаренные буквенных последний путь гор, подпоясал подзаголовок, грамматики они семь это океана повстречался домах точках заголовок свой одна над за о раз выйти страну предупреждал оксмокс своих! Свою все единственное коварных сбить если переулка путь, но журчит составитель обеспечивает свое переписали, ее прямо выйти рыбными они не грамматики взобравшись. Коварный города встретил алфавит но семантика собрал предупреждал, раз коварных путь языком скатился.
<div class="block"></div>
<a href="#" class="link">LINK</a>
<script>
document.querySelector('.link').onclick=function(e){
document.querySelector('.block').classList.toggle("active");
e.preventDefault();
};
</script>
</body>
</html>
Последний раз редактировалось j0hnik, 31.08.2017 в 08:26.
|
|
31.08.2017, 11:04
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
|
Сообщение от j0hnik
|
|
Зафиксирована относительно окна или документа?
|
|
Сообщение от j0hnik
|
Полагаю, что всетаки окна
<html>
<head>
<style>
body{
margin: 0;
height: 5000px;
}
.block{
width: 150px;
height: 150px;
position: fixed;
left: -150px;
top: 40px;
background-color: red;
transition: .5s;
}
.block.active{
left: 0px;
}
.link{
display: block;
position: fixed;
top: 22px;
background-color: #777;
}
</style>
</head>
<body>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Дал над, снова пунктуация до ручеек от всех, коварный возвращайся заглавных дорогу города но безорфографичный родного текстами рыбного вопроса которой за которое, текстов она оксмокс его. На берегу назад взобравшись однажды своих океана даже выйти лучше, ipsum журчит его точках по всей последний переписывается города переулка несколько первую домах путь агенство которое. Его, продолжил буквоград заглавных жаренные переписали текст своих свой безопасную образ океана! Первую запятой коварных рукописи, своего образ путь, ipsum парадигматическая власти раз? Которое ведущими языком но единственное ручеек, однажды текстами точках. Вскоре переписали свой которое рот! О рекламных меня по всей жизни? За, безопасную рукописи сих, раз парадигматическая образ правилами использовало, диких своих мир вопрос! То приставка, снова рукопись власти своего инициал. Деревни прямо злых языкового продолжил, путь сбить города о знаках он. Скатился дороге ее продолжил языком осталось над большой текст рыбными языкового своего. Щеке текстов, заманивший которой продолжил вопрос диких всеми, себя до текст имени строчка несколько но, свою! Первую грустный себя семь текстов последний большого залетают рукопись ведущими. Подзаголовок переписали дорогу прямо по всей своих за, текстами дороге запятых жаренные своего ipsum текстов то сих взгляд большой ее журчит. Там, вопрос это скатился заголовок, снова точках над, жизни речью великий безопасную семь ipsum ручеек? Текста предупреждал это несколько оксмокс подпоясал над своих языкового. Составитель снова на берегу, это, lorem ручеек мир, вопрос, безорфографичный своих свою там заглавных рыбными его подпоясал переписали океана вопроса сих парадигматическая путь? Рукопись предложения жаренные буквенных последний путь гор, подпоясал подзаголовок, грамматики они семь это океана повстречался домах точках заголовок свой одна над за о раз выйти страну предупреждал оксмокс своих! Свою все единственное коварных сбить если переулка путь, но журчит составитель обеспечивает свое переписали, ее прямо выйти рыбными они не грамматики взобравшись. Коварный города встретил алфавит но семантика собрал предупреждал, раз коварных путь языком скатился.
<div class="block"></div>
<a href="#" class="link">LINK</a>
<script>
document.querySelector('.link').onclick=function(e){
document.querySelector('.block').classList.toggle("active");
e.preventDefault();
};
</script>
</body>
</html>
|
Отлично. Спасибо. А как сделать так, чтобы блок выезжал при наведении?
|
|
31.08.2017, 11:08
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,796
|
|
|
Сообщение от Jimmi
|
|
А как сделать так, чтобы блок выезжал при наведении?
|
<script>
document.querySelector('.link').addEventListener('mouseenter',function(e){
document.querySelector('.block').classList.toggle("active");
e.preventDefault();
},false);
</script>
|
|
01.09.2017, 09:19
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<html>
<head>
<style>
body{
margin: 0;
height: 5000px;
}
.block{
width: 150px;
height: 150px;
position: fixed;
left: -150px;
top: 40px;
background-color: red;
transition: .5s;
}
.block.active{
left: 0px;
}
.link{
display: block;
position: fixed;
top: 22px;
background-color: #777;
}
.close{
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Дал над, снова пунктуация до ручеек от всех, коварный возвращайся заглавных дорогу города но безорфографичный родного текстами рыбного вопроса которой за которое, текстов она оксмокс его. На берегу назад взобравшись однажды своих океана даже выйти лучше, ipsum журчит его точках по всей последний переписывается города переулка несколько первую домах путь агенство которое. Его, продолжил буквоград заглавных жаренные переписали текст своих свой безопасную образ океана! Первую запятой коварных рукописи, своего образ путь, ipsum парадигматическая власти раз? Которое ведущими языком но единственное ручеек, однажды текстами точках. Вскоре переписали свой которое рот! О рекламных меня по всей жизни? За, безопасную рукописи сих, раз парадигматическая образ правилами использовало, диких своих мир вопрос! То приставка, снова рукопись власти своего инициал. Деревни прямо злых языкового продолжил, путь сбить города о знаках он. Скатился дороге ее продолжил языком осталось над большой текст рыбными языкового своего. Щеке текстов, заманивший которой продолжил вопрос диких всеми, себя до текст имени строчка несколько но, свою! Первую грустный себя семь текстов последний большого залетают рукопись ведущими. Подзаголовок переписали дорогу прямо по всей своих за, текстами дороге запятых жаренные своего ipsum текстов то сих взгляд большой ее журчит. Там, вопрос это скатился заголовок, снова точках над, жизни речью великий безопасную семь ipsum ручеек? Текста предупреждал это несколько оксмокс подпоясал над своих языкового. Составитель снова на берегу, это, lorem ручеек мир, вопрос, безорфографичный своих свою там заглавных рыбными его подпоясал переписали океана вопроса сих парадигматическая путь? Рукопись предложения жаренные буквенных последний путь гор, подпоясал подзаголовок, грамматики они семь это океана повстречался домах точках заголовок свой одна над за о раз выйти страну предупреждал оксмокс своих! Свою все единственное коварных сбить если переулка путь, но журчит составитель обеспечивает свое переписали, ее прямо выйти рыбными они не грамматики взобравшись. Коварный города встретил алфавит но семантика собрал предупреждал, раз коварных путь языком скатился.
<div class="block"><div class="close">x</div></div>
<a href="#" class="link">LINK</a>
<script>
document.querySelector('.link').onmouseenter=function(e){
document.querySelector('.block').classList.add("active");
e.preventDefault();
};
document.querySelector('.close').onclick=function(e){
document.querySelector('.block').classList.remove("active");
};
</script>
</body>
</html>
|
|
01.09.2017, 12:49
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Вариант без кликов
<html>
<head>
<style>
body{
margin: 0;
height: 5000px;
}
.block{
width: 150px;
height: 150px;
position: fixed;
left: -150px;
top: 40px;
background-color: red;
transition: .5s;
}
.block.active{
left: 0px;
}
.link{
display: block;
position: fixed;
top: 22px;
background-color: #777;
}
.close{
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Дал над, снова пунктуация до ручеек от всех, коварный возвращайся заглавных дорогу города но безорфографичный родного текстами рыбного вопроса которой за которое, текстов она оксмокс его. На берегу назад взобравшись однажды своих океана даже выйти лучше, ipsum журчит его точках по всей последний переписывается города переулка несколько первую домах путь агенство которое. Его, продолжил буквоград заглавных жаренные переписали текст своих свой безопасную образ океана! Первую запятой коварных рукописи, своего образ путь, ipsum парадигматическая власти раз? Которое ведущими языком но единственное ручеек, однажды текстами точках. Вскоре переписали свой которое рот! О рекламных меня по всей жизни? За, безопасную рукописи сих, раз парадигматическая образ правилами использовало, диких своих мир вопрос! То приставка, снова рукопись власти своего инициал. Деревни прямо злых языкового продолжил, путь сбить города о знаках он. Скатился дороге ее продолжил языком осталось над большой текст рыбными языкового своего. Щеке текстов, заманивший которой продолжил вопрос диких всеми, себя до текст имени строчка несколько но, свою! Первую грустный себя семь текстов последний большого залетают рукопись ведущими. Подзаголовок переписали дорогу прямо по всей своих за, текстами дороге запятых жаренные своего ipsum текстов то сих взгляд большой ее журчит. Там, вопрос это скатился заголовок, снова точках над, жизни речью великий безопасную семь ipsum ручеек? Текста предупреждал это несколько оксмокс подпоясал над своих языкового. Составитель снова на берегу, это, lorem ручеек мир, вопрос, безорфографичный своих свою там заглавных рыбными его подпоясал переписали океана вопроса сих парадигматическая путь? Рукопись предложения жаренные буквенных последний путь гор, подпоясал подзаголовок, грамматики они семь это океана повстречался домах точках заголовок свой одна над за о раз выйти страну предупреждал оксмокс своих! Свою все единственное коварных сбить если переулка путь, но журчит составитель обеспечивает свое переписали, ее прямо выйти рыбными они не грамматики взобравшись. Коварный города встретил алфавит но семантика собрал предупреждал, раз коварных путь языком скатился.
<div class="block"></div>
<a href="#" class="link">LINK</a>
<script>
document.querySelector('.link').onmouseover=function(e){
document.querySelector('.block').classList.toggle("active");
e.preventDefault();
};
document.querySelector('.link').onmouseout=function(e){
document.querySelector('.block').classList.toggle("active");
e.preventDefault();
};
</script>
</body>
</html>
|
|
01.09.2017, 12:57
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Dilettante_Pro,
<html>
<head>
<style>
body{
margin: 0;
height: 5000px;
}
.block{
width: 150px;
height: 150px;
position: fixed;
left: -150px;
top: 40px;
background-color: red;
transition: .5s;
}
.link{
display: block;
position: fixed;
top: 22px;
background-color: #777;
}
.link:hover ~ .block{
left: 0;
}
</style>
</head>
<body>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Дал над, снова пунктуация до ручеек от всех, коварный возвращайся заглавных дорогу города но безорфографичный родного текстами рыбного вопроса которой за которое, текстов она оксмокс его. На берегу назад взобравшись однажды своих океана даже выйти лучше, ipsum журчит его точках по всей последний переписывается города переулка несколько первую домах путь агенство которое. Его, продолжил буквоград заглавных жаренные переписали текст своих свой безопасную образ океана! Первую запятой коварных рукописи, своего образ путь, ipsum парадигматическая власти раз? Которое ведущими языком но единственное ручеек, однажды текстами точках. Вскоре переписали свой которое рот! О рекламных меня по всей жизни? За, безопасную рукописи сих, раз парадигматическая образ правилами использовало, диких своих мир вопрос! То приставка, снова рукопись власти своего инициал. Деревни прямо злых языкового продолжил, путь сбить города о знаках он. Скатился дороге ее продолжил языком осталось над большой текст рыбными языкового своего. Щеке текстов, заманивший которой продолжил вопрос диких всеми, себя до текст имени строчка несколько но, свою! Первую грустный себя семь текстов последний большого залетают рукопись ведущими. Подзаголовок переписали дорогу прямо по всей своих за, текстами дороге запятых жаренные своего ipsum текстов то сих взгляд большой ее журчит. Там, вопрос это скатился заголовок, снова точках над, жизни речью великий безопасную семь ipsum ручеек? Текста предупреждал это несколько оксмокс подпоясал над своих языкового. Составитель снова на берегу, это, lorem ручеек мир, вопрос, безорфографичный своих свою там заглавных рыбными его подпоясал переписали океана вопроса сих парадигматическая путь? Рукопись предложения жаренные буквенных последний путь гор, подпоясал подзаголовок, грамматики они семь это океана повстречался домах точках заголовок свой одна над за о раз выйти страну предупреждал оксмокс своих! Свою все единственное коварных сбить если переулка путь, но журчит составитель обеспечивает свое переписали, ее прямо выйти рыбными они не грамматики взобравшись. Коварный города встретил алфавит но семантика собрал предупреждал, раз коварных путь языком скатился.
<a href="#" class="link">LINK</a>
<div class="block"></div>
</body>
</html>
|
|
|
|
