webew
Войти » Регистрация
 
JavaScript

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
Ответить

bur

1) Загоняйте изображение в тег <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
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100