Воскресенье, 24.09.2017, 15:09
RR - StUdIo___Добро Пожаловать Шамкир Гес___StUdIo...RR
Гипер-Софт
Главная Регистрация Вход
Приветствую Вас, гости · RSS
SamirMM Studio"RR" WWW.GES.MOY.SU
  
  Ключи и пин-коды
FIFA, Steam: случайные, Counter-Strike, Playstation Network, Hearthstone: Heroes of Warcraft, World of Warcraft, Xbox LIVE (Microsoft Points), Prepaid Credit Card, Far Cry, Assassin´s Creed, Diablo 3, Middle-earth: Shadow of Mordor, ...
  Электронные книги
Контрольные работы, Музыка, ноты, тексты песен, В помощь студенту, Фэнтази, Физика, История, Государство и право, Математика, Магия, оккультизм, мистика, Творческие личности, Рукоделие, Экономика, ...
  Цифровые товары
Игровые аккаунты, Аккаунты PSN, Аккаунты Xbox, iTunes & App Store, Telonko.ru, Приглашения /инвайты, Разное, Skype-аккаунты, Видео и аудиокурсы, уроки, Google Play, Анонимные прокси, Базы данных, ...
  Программное обеспечение
Разблокировка телефонов, Антивирусы, Принтеры, Программы > MMORPG, Программы для сотовых телефонов, Шифрование, Windows, Спортивные, SEO скрипты, Советники, Стратегии, Mногофункциональные утилиты, ...
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Модератор форума: ges 
форум для всех » Все для web мастера » Скрипты » Анимация картинки при наведении курсора на javascript (Ротатор rotator картинок на javascript.)
Анимация картинки при наведении курсора на javascript
gesДата: Четверг, 20.12.2012, 23:06 | Сообщение # 1
Administrator
Группа: Администраторы
Сообщений: 297
Статус: Offline
[gray][red]Анимация картинки при наведении курсора на javascript.

Ротатор rotator картинок на javascript.[/red]

Я не раз встречал сайты с картинками, при наведении курсора на которые, картинка превращалась в анимацию.

Для чего это нужно?
В первую очередь для того чтобы сайт быстрее загружался.
Ведь намного проще вначале показать пользователю первый кадр из по кадровой анимации

|1кадр|

чем сразу загружать целиком картинку с кадрами

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

Допустим на сайте у нас находится много картинок, представляющих из себя один кадр из какого нибудь фильма.
И вот наша задача сделать так чтобы при наведении на этот кадр курсора мыши,
подгрузилось изображение анимации с кадрами и началась анимация.
Пока идет загрузка изображения с кадрами, мы должны показать пользователю что идет загрузка.

Обычно такой эффект достигается flash анимацией.
Но я решил реализовать это дело на javascript.

Чтобы упростить программирование, я включил в свой проект scriptjava фреймворк, а так же движок покадровой анимации из топика
http://javascript.ru/blog....cript-S...

В итоге у меня получился следующий код

Code

<script type="text/javascript" src="core_engine/scriptjava.js"></script>
<script type="text/javascript" src="core_engine/cartoon_image.js"></script>
<style type="text/css">
#r_pic1 {
    position:relative;
    border:1px solid #000000;
    cursor:pointer;
    width:160px;
    height:120px;
    background-image:url(ss1.jpg);
}
#r_pic2 {
    position:relative;
    top:10px;
    border:1px solid #000000;
    cursor:pointer;
    width:160px;
    height:120px;
    background-image:url(ss1.jpg);
}
</style>

<div id="r_pic1">
    <img id="r_img_pic1" border="0" />
</div>

<div id="r_pic2">
    <img id="r_img_pic2" border="0" />
</div>

<script type="text/javascript">
//сначала прописываем по порядку
//1- id div элемента
//2- id img элемента
//3- адрес на картинку с кадрами
//4- ширина картинки с кадрами в пикселях
//5- высота картинки с кадрами в пикселях
//6- число кадров по горизонтали
//7- число кадров по вертикали
//8- скорость анимации, количество кадров в секунду
//9- изображение загрузки
//10- смещение изображения загрузки слева в пикселях
//11- смещение изображения загрузки сверху в пикселях

var settings =  [];
settings[0] = ['r_pic1','r_img_pic1','s1.jpg',1600,120,10,1,5,'l1.gif',72,52];
settings[1] = ['r_pic2','r_img_pic2','s2.jpg',1600,120,10,1,5,'l1.gif',72,52];

//все что дальше не трогаем!!!
for(var i=0;i<settings.length;i++) {
(function (id_div,id_img,src_img,img_w,img_h,img_x,img_y,img_fps,src_img_l,img_l_l,img_l_t) {
var slide_img;
var load_img = function () {
    slide_img=new Image()
    slide_img.onload = function () {
     $$(id_img,'visibility','visible');
     r_pic1_set();
     $$(id_div).removeChild(load_pic);
    }
    slide_img.src=src_img;
}

var cartoon_image1;
var r_pic1_set = function() {
    cartoon_image1=new cartoon_image();
    cartoon_image1.play({
      id:[id_div,id_img],//id div элемента и img элемента
      src:slide_img.src,//ссылка на изображение
      frames_x:img_x,//количество кадров на изображении по x
      frames_y:img_y,//количество кадров на изображении по y
      width:img_w,//ширина изображения
      height:img_h,//высота изображения
      fps:img_fps,//скорость показа кадров в секунду, можно писать дробные числа
      reverse:false,//если true то проигрывается с конца в начало
      playandstop:false,//если true то проиграть 1 раз и передать управление функции next
      next: function () {//выполнится только если playandstop==true
       //сюда можно пысать следующий код который будет выполняться после завершения анимации
      }
     });
}

var load_pic;
var on_mouseover_1 = function () {
load_pic=$$i({
     create:'img',
     attribute: {
       'style':'position:absolute; left:'+img_l_l+'px; top:'+img_l_t+'px;','src':src_img_l
     },
     insert:$$(id_div)
});
//настройки для старого осла
$$(load_pic).$$('position','absolute').$$('left',img_l_l+'px').$$('top',img_l_t+'px');
$$(load_pic).src=src_img_l;

    load_img();
}

var on_mouseout_1 = function () {
    cartoon_image1.stop();
    $$(id_img,'visibility','hidden');
}

$$r(function() {//если документ полностью загрузился выполняю код
       
    //добавляю события кнопкам при нажатии
    $$e.add($$(id_div),'mouseover',on_mouseover_1);
    $$e.add($$(id_div),'mouseout',on_mouseout_1);
       
    $$(id_img,'visibility','hidden');
       
});

})(settings[i][0],settings[i][1],settings[i][2],settings[i][3],settings[i][4],settings[i][5],settings[i][6],settings[i][7],settings[i][8],settings[i][9],settings[i][10]);
}
</script>



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

Вначале нам нужно разместить новый элемент

Code
<div id="r_pic1">
       <img id="r_img_pic1" border="0" />
</div>


и прописать для него css стиль

Code

#r_pic1 {
    position:relative;
    border:1px solid #000000;
    cursor:pointer;
    width:160px;
    height:120px;
    background-image:url(ss1.jpg);
}



далее нужно прописать его в скрипте, добавив строку с необходимыми параметрами

settings[0] = ['r_pic1','r_img_pic1','s1.jpg',1600,120,10,1,5,'l1.gif',72,52];

что означает каждый параметр?
1- id div элемента
2- id img элемента
3- адрес на картинку с кадрами
4- ширина картинки с кадрами в пикселях
5- высота картинки с кадрами в пикселях
6- число кадров по горизонтали
7- число кадров по вертикали
8- скорость анимации, количество кадров в секунду
9- изображение загрузки
10- смещение изображения загрузки слева в пикселях
11- смещение изображения загрузки сверху в пикселях

Вот и все.

Автор Скрипта http://javascript.ru

[/gray]
Прикрепления: mouse-over-anim.zip(39Kb)


Прежде чем задать вопрос Администратору подумайте вопрос о чем?
Администраторы вопросах не отвечает только создает тему!
Вопросы долько в том случай о том вопрос будет про
Студии "RR"
 
форум для всех » Все для web мастера » Скрипты » Анимация картинки при наведении курсора на javascript (Ротатор rotator картинок на javascript.)
Страница 1 из 11
Поиск:

© GES.MOY.SU 2007-2017 . Администрация не несёт ответственности за содержащие файлы на портале.   
Все материалы на сайте принадлежат исключительно их владельцам! 
Сайт оптимизирован для просмотра с разрешением более 1024x768, браузером FireFox или Opera.
 Разрешение вашего экрана : Ваш браузер: -
<< Сайт зарегистрирован в домене >>