nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

Предзагрузка картинок и изображений на javascript. При наведении курсора меняется картинка. Анимация слайд шоу при наведении курсора на яваскрипт.

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

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

|1кадр|

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

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

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

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

Чтобы упростить программирование, я включил в свой проект scriptjava фреймворк, а так же движок покадровой анимации из топика
http://nagon.net/detail.php?post=58

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


<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 j=0;j<settings.length;j++) {
(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[j][0],settings[j][1],settings[j][2],settings[j][3],settings[j][4],settings[j][5],settings[j][6],settings[j][7],settings[j][8],settings[j][9],settings[j][10]);
}
</script>


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

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


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


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


#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- смещение изображения загрузки сверху в пикселях

Вот и все.

Рабочий пример вы можете скачать по ссылке:

скачать

Благодаря scriptjava и готовому движку мы получили простой рабочий код.
Вас зовут:

Ваш комментарий:


Код на картинке: