Помощник
|
аналог <marquee> на JS |
sikwel_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
Letmetouchyou |
26.10.2009, 16:36;
Ответить: Letmetouchyou
Сообщение
#2
|
|
animate(params, [duration], [easing], [callback])
params - набор атрибутов стилей, которые Вы хотите анимировать. duration (Optional) - строка, представляющая собой ключевое слово ("slow", "normal", или "fast") или число, указываюее длительность эффекта в миллисекундах. easing (Optional) - строка, представляющая собой имя эффекта плагина easing. Имеет два встроенных значения "linear" и "swing". Используется только с плагином. callback (Optional) - функция, которая может быть вызвана по завершении анимации каждого элемента набора. например $(document).ready(function(){ $("#block_id").animate({"left": "-=200px"}, "slow"); }); #block_id - id выезжаюшего елмента. .block_class - если использовать класс. |
|
|
sikwel_hb
|
Сообщение
#3
|
|
С анимацией я разобрался, как бы теперь это все прикрутить, чтобы не выглядело противоестественно :sarcastic:
У меня резина и нужно чтобы надпись выезжала из за пределов блока с правого края и останавливалась доезжая до предела с левого края. как бы это все организовать? |
|
|
sikwel_hb
|
Сообщение
#4
|
|
Итак, после непродолжительного стуканья головой о стеночку, я смог оформить процесс выезжания надписи в связный текст:sarcastic::
Так как контейнер у меня резиновый, то нужно как-то определить его ширину и отнять ширину анимируемого (у него ширина фиксирована), чтобы он при остановке слева не заехал за границу блока (будет ехать от posidion:absolute; right:0). Также в начале выезда анимируемого прозрачного контейнера, нужно сделать постепенное увеличение прозрачности до 100%. Как бы это сделать, подскажите люди добрые:). $(document).ready(function(){ $(".block").animate({"left": "-=(здесь нужно как-то определить ширину растягивающегося блока и отнять ширину анимируемого)"}, "slow"); }); |
|
|
Letmetouchyou |
3.11.2009, 16:17;
Ответить: Letmetouchyou
Сообщение
#5
|
|
прозрачность можно просто через
$(".block").fadeIn(speed, [callback]) speed : "slow" "fast" "normal" так же может принимать и численные значения 1000 2000 3000. ( только не скажешь в каких единицах времени ето , потмоу что не знаю :))) ) а изначально блок должен бытьь display:none; может есть какието функции для работы именно с прозрачностью.. но я не встречал. а про ширну: $(document).ready(function(){ var way = $(".rezina").width()-$(".block").width(); }); rezina - резиновый блок block - тот который выезжает 8) |
|
|
sikwel_hb
|
Сообщение
#6
|
|
Спасибо, Letmetouchyou, и еще идиотский вопрос, как мне правильно вставить в эту функцию, вместо пикселей переменную? :sarcastic:
$(document).ready(function(){
$(".block").animate({"left": "-=500px"}, "slow"); }); |
|
|
Letmetouchyou |
3.11.2009, 16:42;
Ответить: Letmetouchyou
Сообщение
#7
|
|
$(document).ready(function(){ $(".block").animate({"left": way }, "slow"); }); и насчет прозрачности попробуйте еше $(document).ready(function(){ $(".block").animate({"left": way , "opacity": 1}, "slow"); }); ето в ксс для выезжающего блока: filter:alpha(opacity:0); KHTMLOpacity: 0; MozOpacity: 0; opacity: 0;
|
|
|
sikwel_hb
|
Сообщение
#8
|
|
|
|
|
Letmetouchyou |
3.11.2009, 17:00;
Ответить: Letmetouchyou
Сообщение
#9
|
|
"-=" и "+=" ето для "относительной" анимацию, т.е. определять значения соответствующего свойства относительно его текущей позиции .
если по проще то ... если ставить анимцию на клик , то если просто Left : 100px то раз проедет и все. A left : +=100px при каждом клике ехать будет. +100 отн. текущей позици. Насчет пикселей, я проверил - во всех браузерах работает. ( может быть подефолту они ... ). Но никто не запрешает $(document).ready(function(){ $(".block").animate({"left": way + "px" }, "slow"); }); так же и "-="или "+=" если у вас раз выезжает то можно просто "-" + way + "px" |
|
|
Webmaster_hb |
3.11.2009, 17:29;
Ответить: Webmaster_hb
Сообщение
#10
|
|
sikwel, поощряю ваше стремление сделать самому
но для jquery куча готовых плагинов посмотрите их например, http://www.givainc.com/labs/marquee_example.htm |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Аналог YouDO: Android приложения, веб + backend/api | 6 | kwork | 6582 | 28.8.2023, 20:04 автор: mikmaster22 |
|
Аналог сервиса статстики | 0 | Portsmouth | 1970 | 10.12.2018, 18:59 автор: Portsmouth |
|
Аналог cointellect который пока платит, можно даже в битки | 0 | ditalka | 2881 | 14.11.2015, 0:14 автор: -ditalka- |
|
Аналог движок с доходом от 750 000 руб в месяц | 3 | ehisod | 2457 | 16.6.2015, 8:58 автор: x64 |
|
Аналог P-API-Shop для WP | 0 | Palkasha | 2772 | 19.4.2015, 0:00 автор: Palkasha |
Текстовая версия | Сейчас: 19.3.2024, 13:55 |