29.05.2012, 07:11
|
Новичок на форуме
|
|
Регистрация: 29.08.2010
Сообщений: 9
|
|
Изменить знак в выражении или скрипт плавного изменения размеров
Пример: http://www.пкмосква.рф/13/
Есть код разворачивающей и сворачивающей функций, отличаются они двумя знаками: >/< и -/+
Хочется код сократить до единственной функции, определять как-то оба знака, есть способы изменять знак в выражении на js?
Понятно, конструкции превосходящие по сложности, текущий вариант бесполезны
Или любые упрощения кода, может у кого хорошии функции есть свои, в сети ничего по данному вопросу не нашёл?
function Show(Id, h)
{
var obj = document.getElementById(Id);
if (obj.offsetHeight < h)
{
obj.style.height = (obj.offsetHeight + 10) + "px";
setTimeout (function(){Show(Id, h)}, 8);
}
}
function Hidden(Id, h)
{
var obj = document.getElementById(Id);
if (obj.offsetHeight > h)
{
obj.style.height = (obj.offsetHeight - 50) + "px";
setTimeout (function(){Hidden(Id, h)}, 8);
}
}
</SCRIPT>
Было бы идиотизмом не иметь подобных возможностей в современном языке программирования
|
|
29.05.2012, 09:30
|
|
сегодня в 12:34|Комментир
|
|
Регистрация: 12.04.2011
Сообщений: 1,180
|
|
Ставишь в качестве аргмента еще один параметр, и проверяешь, если он такой-то, то знак >, если другой, то знак: < итд
__________________
оляля, ололо
|
|
29.05.2012, 11:32
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Fenjmen51,
Cтандатный вариант toggle -
При разворачивания добавлем класс( или иной атрибут) при очередном действе смотрим - атрибут есть - сворачиваем - атрибута нет - разворачиваем...
А вообще сейчас это всё через css делается http://hostjs-mybb2011.narod.ru/smooth_deployment.htm
<!DOCTYPE HTML>
<div class="height" style="width:400px" onMouseOver="this.id='height'">
Очень качественное развёртывание блока, плавное!
</div>
<STYLE>
BODY, HTML{margin:0;padding:0}
div.height{
margin:25px 0 0 5em;padding:10px;background:#55f;width:400px;color:white;border-radius:15px;cursor:pointer;border:3px solid #eee;
min-height:20px;
}
#height:hover{
max-height:400px;
height:400px;
transition-duration: 1.66s;
-webkit-transition-duration: 1.66s;
-moz-transition-duration: 1.66s;
-o-transition-duration: 1.66s;
-ms-transition-duration: 1.66s; /* IE9+ */
}
#height{
transition-duration: 1.66s;
-webkit-transition-duration: 1.66s;
-moz-transition-duration: 1.66s;
-o-transition-duration: 1.66s;
-ms-transition-duration: 1.66s; /* IE9+ */
}
</style>
Последний раз редактировалось Deff, 29.05.2012 в 11:36.
|
|
29.05.2012, 18:21
|
Новичок на форуме
|
|
Регистрация: 29.08.2010
Сообщений: 9
|
|
Хочется избавиться от лишних 5 строк, а не добавить ещё 2, интересно было бы менять знак, действительно добавить ещё переменную и передавать ею знак, например, так 2 символа будет лишних. С if дураку понятно, что можно. Или можно обойтись без двойного повторения и как-то переменной знак задать или ещё что придумать?
Пример с CSS3 и трансформацией, в IE9, Фаерфоксе - не работает, просто быстро открывает, может правда им можно большее время задать.
Работает в Опере. Однако вопрос у меня про знаки остаётся, можно ли их как-то менять?
Про проверку атрибутов, выходит тоже две функции с if ? те же 10 строчек, аналогично и с CSS level 3, тоже строк больше. Люблю всё делать на нём, однако не в этот раз
|
|
29.05.2012, 18:47
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Fenjmen51,
У Вас же есть проверка - объединяйте в одну функцию
<!DOCTYPE HTML>
<div id="height" onMouseOver='Toggle("height", 400,true)' onMouseOut='Toggle("height", 50,false)'>
Очень качественное развёртывание блока, плавное!
</div>
<STYLE>
BODY, HTML{margin:0;padding:0}
#height{margin:25px 0 0 5em;padding:10px;background:#55f;width:400px;color:white;border-radius:15px;cursor:pointer;border:3px solid #eee;}
</STYLE>
<SCRIPT>
function Toggle(Id, h, S)
{
var obj = document.getElementById(Id);
if (obj.offsetHeight < h&&S)
{
obj.style.height = (obj.offsetHeight + 10) + "px";
setTimeout (function(){Toggle(Id, h,true)}, 8);
}
if (obj.offsetHeight > h&&!S)
{
obj.style.height = (obj.offsetHeight - 50) + "px";
setTimeout (function(){Toggle(Id, h,false)}, 8);
}
}
</SCRIPT>
Последний раз редактировалось Deff, 29.05.2012 в 18:56.
|
|
Тема |
Автор |
Раздел |
Ответов |
Последнее сообщение |
Изменить скрипт |
Изучаю_JS |
Общие вопросы Javascript |
0 |
12.02.2012 22:05 |
|
|
|