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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> аналог <marquee> на JS
sikwel_hb
sikwel_hb
Topic Starter сообщение 26.10.2009, 14:38; Ответить: sikwel_hb
Сообщение #1


Здравствуйте, умные люди.

С JS я не очень дружу.
Может кто-нибудь подскажет как с помощью jQuery можно это реализовать?

Чтобы при загрузки страницы, надпись выезжала справа налево по горизонтали и останавливалась.

Спасибо за ответы.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
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
sikwel_hb
Topic Starter сообщение 2.11.2009, 18:58; Ответить: sikwel_hb
Сообщение #3


С анимацией я разобрался, как бы теперь это все прикрутить, чтобы не выглядело противоестественно :sarcastic:

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

как бы это все организовать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sikwel_hb
sikwel_hb
Topic Starter сообщение 3.11.2009, 15:08; Ответить: sikwel_hb
Сообщение #4


Итак, после непродолжительного стуканья головой о стеночку, я смог оформить процесс выезжания надписи в связный текст:sarcastic::

Так как контейнер у меня резиновый, то нужно как-то определить его ширину и отнять ширину анимируемого (у него ширина фиксирована), чтобы он при остановке слева не заехал за границу блока (будет ехать от posidion:absolute; right:0). Также в начале выезда анимируемого прозрачного контейнера, нужно сделать постепенное увеличение прозрачности до 100%. Как бы это сделать, подскажите люди добрые:).

$(document).ready(function(){
$(".block").animate({"left": "-=(здесь нужно как-то определить ширину растягивающегося блока и отнять ширину анимируемого)"}, "slow");
});
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
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
sikwel_hb
Topic Starter сообщение 3.11.2009, 16:28; Ответить: sikwel_hb
Сообщение #6


Спасибо, Letmetouchyou, и еще идиотский вопрос, как мне правильно вставить в эту функцию, вместо пикселей переменную? :sarcastic:

  $(document).ready(function(){
     $(".block").animate({"left": "-=500px"}, "slow");
  });
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
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
sikwel_hb
Topic Starter сообщение 3.11.2009, 16:47; Ответить: sikwel_hb
Сообщение #8


(Letmetouchyou @ 3.11.2009, 18:42) *
$(document).ready(function(){
     $(".block").animate({"left": way }, "slow");
  });


а что делать с -= и px ?

Их же надо каким-то образом конкатенировать к переменной way?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
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
Webmaster_hb
сообщение 3.11.2009, 17:29; Ответить: Webmaster_hb
Сообщение #10


sikwel, поощряю ваше стремление сделать самому
но для jquery куча готовых плагинов
посмотрите их

например,
http://www.givainc.com/labs/marquee_example.htm
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Аналог 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


 



RSS Текстовая версия Сейчас: 19.3.2024, 13:55
Дизайн