Увеличение ширины div с каждой секундой
Как сделать так, чтобы с каждой секундой к div прибавлялась ширина и останавливалась на определенном значение, например, 47%.
P.S. Заранее огромное спасибо
Плавное увеличение ширины div (preloader на сайт)
Здравствуйте! Пытаюсь сделать предзагрузчик на сайт. Идея такова: имеется div с нужным background.
Плавное увеличение высоты div
На странице есть 4 ссылки в строчку нужно чтобы при нажатии на ссылку плавно под ней открывался div.
Плавное увеличение высоты div
Надо что-бы по нажатию на ссылку div блок плавно увеличивался в высоте и также уменьшался при клике.
Увеличение размера div при клике на флеш-ролике
Доброе время суток Уважаемы спецы по js, подскажите Есть флешка, которая сначала должна.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
html> head> title>JavaScript/title> style type="text/css"> #myDiv < height: 100px; background-color: brown; >/style> script type="text/javascript"> function Resize() < var div = document.getElementById("myDiv"); var count = 0; var ob = setInterval(function () < div.style.width = parseInt(div.style.width) * 1.1 + "px"; count++; if (count >5) clearInterval(ob); >, 1000); > /script> /head> body onload="Resize()"> div id="myDiv" style="width: 100px;">/div> /body> /html>
Diman777, спасибо за помощь, но уже сам все решил — при помощи свойства animation в jquery
Может кому пригодится
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
html> head> title>Пример изменения ширина блока/title> style type="text/css"> .myblock < width: 10px; background: #313133; >/style> script type="text/javascript"> function playAnimation()< $('.myblock').animate(, 2500); > /script> /head> body> div onclick="playAnimation()">/div> /body> /html>
var div = document.getElementById("myDiv"); if (!div.style.width) div.style.width = window.getComputedStyle(div, null).width;
надо бы за jquery взяться.. еще не дошел до этого 🙂
Можно это сделать с помощью CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
html> head> meta charset="utf-8" /> link rel="stylesheet" href="style.css"> /head> body> div class="wrapper"> h1>Hover over me!/h1> span class="content">/span> /div> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
/* Styles go here */ .wrapper { width: 300px; padding: 5px; border: 1px solid black; background-color: #EEE; } .content { height: 20px; background-color: blue; display: inline-block; transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -webkit-transition: width 1s ease-in-out; } .wrapper > h1 { margin: 0 5px 5px 5px; } .wrapper > .content { width: 10%; } .wrapper:hover { cursor: pointer; } .wrapper:hover > .content { width: 47%; }
Изменение размеров div на JavaScript
Мы с Вами когда-то разбирали перемещение div на JavaScript, а сегодня мы разберём изменение размеров div на JavaScript, которое так же может быть очень удобно для пользователей сайта.
Для начала разберём HTML-код:
Думаю, тут всё более чем понятно. Что касается «block_resize«, то именно его и надо будет «тянуть» для изменения размеров блока.
#block background-color: #ff0;
min-height: 100px;
min-width: 200px;
position: relative;
width: 400px;
>
#block_resize background-color: #000;
bottom: 0;
cursor: se-resize;
height: 12px;
margin-top: 9px;
position: absolute;
right: 0;
width: 12px;
>
Теперь разберём самое главное и самое сложное — код JavaScript:
Код я постарался хорошо прокомментировать, поэтому разобраться в нём можно. Если Вы читали про перемещение div с помощью JavaScript, то Вы заметили огромную схожесть, что неудивительно, ведь используется тот же механизм drag-and-drop.
В любом случае, даже если Вы затрудняетесь в понимании кода, Вы можете его копировать, заменив только имена блоков, и вставить к себе на сайт. Никаких jQuery данный код не требует, что также является большим преимуществом данного скрипта.
Создано 23.09.2013 08:40:32
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 3 ):
извеняюсь что не в тему! Миша, я тут увидел у тебя на сайте опрос по будущему видеокурсу, и хотел бы тебя спросить, сколько будет примерно он стоить, если выбирут социальную сеть?
Ещё пока ничего неизвестно.
Как сделать чтобы при нажтии на кнопку блок увеличивался в размерах?
Как сделать, чтобы при добавлении цифр блок увеличивался в ширину
А еще один последний вопрос, можно как-то сделать так, чтобы например при добавлепнии еще цифр блок.
Как сделать так, чтобы при нажтии кнопки НАЗАД стр. перегружалась заново?
Подскажите, пожалуйста, как сделать так, чтобы при нажтии кнопки НАЗАД стр. перегружалась заново.
Как сделать, чтобы страничка отображалась одинаково при любых размерах окна?
Тут такая проблема. делаю страничку состоящую из 3х фреймов. в фреймах отображаются картинки. Не.
Как сделать так, чтобы объект с изменением координаты Z постепенно увеличивался в размере
public GameObject car; float positions; void Start() < positions =.
div id="parent"> div class="button_answers" onclick="make_him_big()"> a href="#">/a> /div> /div>
function make_him_big(){ el = document.getElementById('parent'); el.style.height = +el.style.height.replace('px','') + 100 + 'px'; }
philin, ну получается parent это тот блок который должен увеличиваться. Если это так, то правильно все. Спасибо вам большое
Добавлено через 2 часа 11 минут
philin, нет, вы не правиьлно поняли. У блока в котором есть кнопка есть еще родительский блок. Вот нужно чтобы для него было увеличивалась высота
1 2 3 4 5 6 7 8 9 10 11 12 13
div id="parent"> div> div> div> div> div class="button_answers" onclick="make_him_big()"> a href="#">/a> /div> /div> /div> /div> /div> /div>
div class="button_answers" onclick="make_him_big()"> a href="#" style="display: block; width: 70px; height: 70px; background: #000; float: left">/a> /div>
и есть родительский блок у этого всего. Не увиличивается ничего по нажатиии, просто она как ссылка работает.
Добавлено через 2 минуты
philin, получавется блок parent должен увеличиваться. Я в скрипте изменил название блока на свой и сделал все как у вас, ничего не работает
Добавлено через 2 минуты
philin, аа, ы через ид. А можно через класс как-то. Там класс у меня
Как сделать чтобы при нажтии на кнопку блок увеличивался в размерах?
Как сделать, чтобы при добавлении цифр блок увеличивался в ширину
А еще один последний вопрос, можно как-то сделать так, чтобы например при добавлепнии еще цифр блок.
Как сделать так, чтобы при нажтии кнопки НАЗАД стр. перегружалась заново?
Подскажите, пожалуйста, как сделать так, чтобы при нажтии кнопки НАЗАД стр. перегружалась заново.
Как сделать, чтобы страничка отображалась одинаково при любых размерах окна?
Тут такая проблема. делаю страничку состоящую из 3х фреймов. в фреймах отображаются картинки. Не.
Как сделать так, чтобы объект с изменением координаты Z постепенно увеличивался в размере
public GameObject car; float positions; void Start() < positions =.
div id="parent"> div class="button_answers" onclick="make_him_big()"> a href="#">/a> /div> /div>
function make_him_big(){ el = document.getElementById('parent'); el.style.height = +el.style.height.replace('px','') + 100 + 'px'; }
philin, ну получается parent это тот блок который должен увеличиваться. Если это так, то правильно все. Спасибо вам большое
Добавлено через 2 часа 11 минут
philin, нет, вы не правиьлно поняли. У блока в котором есть кнопка есть еще родительский блок. Вот нужно чтобы для него было увеличивалась высота
1 2 3 4 5 6 7 8 9 10 11 12 13
div id="parent"> div> div> div> div> div class="button_answers" onclick="make_him_big()"> a href="#">/a> /div> /div> /div> /div> /div> /div>
div class="button_answers" onclick="make_him_big()"> a href="#" style="display: block; width: 70px; height: 70px; background: #000; float: left">/a> /div>
и есть родительский блок у этого всего. Не увиличивается ничего по нажатиии, просто она как ссылка работает.
Добавлено через 2 минуты
philin, получавется блок parent должен увеличиваться. Я в скрипте изменил название блока на свой и сделал все как у вас, ничего не работает
Добавлено через 2 минуты
philin, аа, ы через ид. А можно через класс как-то. Там класс у меня