JS + Gif?
8 июля 2008, 15:46
Автор: Lesso
На сайте http://www.chinavasion.com/ в левом верхнес углу сделан отгибающийся уголок. Возможно ли это реализовать через JS+gif? И если возможно, то как это сделать? Спасибо.
![]() |
|
|
burЗадача, я так понимаю, сделать аналогичную штуку без привлечения флеша?Делаем примерно следующее: <img id="imgId" style="position:absolute; left:0; top:0;" src="small_angle.gif" onmouseover="imgOver();" onmouseout="imgOut();" width="30" height="30" alt="" /> <script type="text/javascript"> var animationDelay = 1000; var animationState = false; function imgOver() { var img = document.getElementById("imgId"); if (!animationState) { animationState = true; img.src="big1_angle.gif"; img.width="200"; img.height="200"; setTimeout("animationState = false;", animationDelay); } else setTimeout("imgOver()", 100); } function imgOut() { var img = document.getElementById("imgId"); if (!animationState) { animationState = true; img.src="big2_angle.gif"; setTimeout("animationState = false; imgOutEnd();", animationDelay); } else setTimeout("imgOut()", 100); } function imgOutEnd(img) { var img = document.getElementById('imgId'); img.src = "small_angle.gif"; img.width = "30"; img.height = "30"; } </script> small_angle.gif - исходный мелкий уголок big1_angle.gif - анимированный гиф выезжающего уголка big2_angle.gif - анимироанный гиф обратно заезжающегося уголка img.width = "XX"; img.height = "YY"; - соот-ие размеры гифов animationDelay - целое число миллисекунд, которое занимает гифовая анимация. Такие сложности с задержками нужны затем, чтобы анимации успевали разворачиваться и сворачиваться полностью, даже если юзер уже убрал указатель с элемента. |
08.07.2008, 16:34 Ответить |
NO USERPIC
|
LessoСпасибо =)Есть ещё пара вопросов: 1. Если делать ссылку, как её вставить? Чтоб уголок этот был типа банера и можно было переходить на нужную страницу при клике по gif'y. 2. Можно ли сделать чтоб поверх ещё выводился код JS (делаем белый отгибающийся листок .gif, а когда он отогнётся, чтоб срабатывал код JS и выводил текст{код JS, выводящий текст уже есть}, а потом, когда мышь убираешь, код JS убирался и .gif так же закрывался. При этом, выводимый текст должен быть кликабельным, с возможностью перехода по ссылкам) Спасибо. |
08.07.2008, 16:56 Ответить |
|
bur1) Загоняйте изображение в тег <a>2) Можно. Вообще это уже излишние подробности и на основе приведенного выше кода проблему можно решить самостоятельно. Намекну. Предположим, что вывод текста привязан к ф-ии showText. Тогда, для отображения текста по завершению отгибания изменяем в ф-ии imgOver всего одну строку: setTimeout("animationState = false; showText();", animationDelay);
|
08.07.2008, 17:02 Ответить |
NO USERPIC
|
LessoСпасибо =) Дальше буду развивать моцк =) |
08.07.2008, 18:14 Ответить |
![]() |
AvrorА вот еше есть вопрос - браузеры как они видят данный код? Браузер Firefox не отображает содержимое и гифовские картинки, а Expiorer выдает в начале запрос о том что подобные активные содержимые могут быть опасны для компа., но после разрешения подобной темы работает все отлично, какие действия можно тут посоветовать? |
04.01.2009, 15:18 Ответить |
|
burКиньте ссылку на страницу, которая у вас не работает в ФФ?Предупреждение в ИЕ видно только из локальной копии html-файла, на сервере вы его видеть не должны. |
05.01.2009, 22:30 Ответить |
![]() |
Avrorссылки нет, просто когдая пытаюсь проверить код, типа как это выглядеть и т.д. при запуске Firefox все отлично просматривает как например активный содержимого хвоста мыши, а этот код (уголка) не отображает на лицевой части страницы; Explorer же все время говорит об об опасности активного содержимого указывает на возможные ошибки, но после все работает, я к тому что если explorer так будет постоянно то просмотр страниц будет вечно затруднителен! У меня раньше то кого не было, а этот код firefox просто не хочет показывать что из этого выйдет! p.s. я проверяю код прописывая его через Dreamweaver и запуская через него все просто идеально работает, но отдельно созданную страницу начинает браузеры действовать по описанному выше. |
06.01.2009, 14:57 Ответить |
![]() |
AvrorНарод, а как можно сделать проше, чтоб не писать такой большой скрипт если скажем уголков несколько? Или всеже для каждого свой придется писать?? |
18.01.2009, 17:50 Ответить |
|
burСкрипт уже написан выше.Проще - на флеше. Неужели вы с июля месяца продолжаете решать эту задачу? |
19.01.2009, 12:14 Ответить |
![]() |
AvrorИ вовсе не с июля и если я точно помню то где-то в середине осени, да мне интересно, и до этого я разбирал другой вопрос кстати спс за помощь еше раз. А для нескольких "углов" придется расписывать для каждого код в отдельности? |
20.01.2009, 19:14 Ответить |
|
burДата создания этой темы: 8 июля 2008, 15:46.Не обязательно дублировать весь код для каждого уголка. Можно написать функцию-конструктор и с её помощью создать столько объектов, сколько необходимо. |
26.01.2009, 13:12 Ответить |
![]() |
Avror... функция конструктор? Как это сделать? |
07.02.2009, 21:57 Ответить |
|
burПростой пример:function A(id) { // Constructor
this.id = id; } A.prototype = { // Prototype show : function() { alert(this.id); } } var a = new A('first'); var b = new A('second'); a.show(); // Покажет 'first' b.show(); // Покажет 'second' |
10.02.2009, 18:26 Ответить |
![]() |
Avrorто-есть... в прототип надо внести скрипт основу, а потом ссылаться на нее, и в конструкторе задавать нужные значения, объясните плиз точнее?а прототип и конструктор можно тока одной определенной функции иметь, и как это сделать я пробовал но не понимаю и не получается ничего? в чем я неправ? |
10.02.2009, 19:45 Ответить |
|
burКонструктор - это функция, использующаяся для создания экземпляров объектов с помощью оператора new. В конструкторе вы можете задать свойства и методы, уникальные для каждого объекта. В прототипе удобно хранить свойства методы общие для всех объектов. Таким образом вы можете описать всю логику в прототипе, а потом использовать её, создавая сколь угодно много экземпляров объектов. |
16.02.2009, 11:35 Ответить |
![]() |
Avrorмне не понятно вот что - как толком внести верхний скрипт в конструктор(пытался долго... но без результатно)? ...и еше какие операторы отвечают в верхнем скрипте за расположение катринки при на видении на первоночальный обект(тоже картинку) и как их изменить? ... |
16.02.2009, 20:41 Ответить |
|
burФункции imgOver, imgOut, imgOutEnd делаете методоми в прототипе.А такие переменные как "адрес исходного мелкого уголка", "адрес анимированного выезжающего уголка", "адрес анимироанного обратно заезжающегося уголка", img.width и img.height пропишите в конструкторе, и передавайте их в списке аргументов, чтобы при создании объектов эти свойства имели уникальные значения. + не забудьте про переменные таймера. |
19.02.2009, 11:22 Ответить |
![]() |
Avrorок... спасибо =) |
21.02.2009, 17:52 Ответить |