Javascript.RU

Анимация картинки при наведении курсора на javascript.

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

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

|1кадр|

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

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

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

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

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

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

<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>

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

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

<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 и готовому движку мы получили простой рабочий код.

+1

Автор: СССР (не зарегистрирован), дата: 9 октября, 2013 - 23:20
#permalink

Здравствуйте, вот не совсем понимаю как зацикливать?
Посмотрите пожалуйста код,как зациклить показ изображения?

var url = image_patch;
var timers  = new Array;
var images  = new Array;

function changeThumb( id, url ) {
document.getElementById(id).src = url;
}
$(document).ready(function() {
$("img[id*='thumb_']").mouseover(function(){
var image_src   = $(this).attr("src");
var pref_split  = image_src.split('-');
var img_pref    = pref_split[1];
var prefix      = img_pref.split('_');
var image_id    = $(this).attr("id");
var id_split    = image_id.split('_');
var video_id    = id_split[1];
var count       = id_split[2];

for ( var i=1; i<=count - 1; i++ ) {
var image_url = url + video_id + "-" + prefix[0] + '_0' + i + '.jpg';
images[i]     = new Image();
images[i].src = image_url;
}
for ( var i=1; i<=count - 1; i++ ) {
timers[i] = setTimeout("changeThumb('" + image_id + "','" + url + video_id + "-" + prefix[0] + '_0' + i + '.jpg' + "')", i*speed_rotate*10);
}
}).mouseout(function(){
var image_src   = $(this).attr("src");
var pref_split  = image_src.split('-');
var img_pref    = pref_split[1];
var prefix      = img_pref.split('_');
var image_id    = $(this).attr("id");
var id_split    = image_id.split('_');
var video_id    = id_split[1];
var count       = id_split[2];
for ( var i=1; i<=count- 1; i++ ) {
if ( typeof timers[i] == "number" ) {
clearTimeout(timers[i]);
}}
$(this).attr('src', url + video_id + "-" + prefix[0] + '_00.jpg'); 
});
});

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
16 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum