4.05.13, 16:34
0 комментарий
  Уроки

Создание изображения в виде значка при помощи JavaScript

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

Для того чтобы применить эффект нужно подгрузить файлы javascript sphere.js и cvi_sphere_lib.js затем присвоить класс изображению sphere.

Создание изображения в виде значка при помощи JavaScript

<img src="automobile.jpg" class="sphere" />


Теперь разберём эффекты. Как видно на изображении справа «значок» отбрасывает тень, степень её интенсивности можно регулировать от 1 до 100 (по умолчанию 100.).

Создание изображения в виде значка при помощи JavaScript

<img src="automobile.jpg" class="sphere ishade1" />


Следующий эффект это блик, белые овальные пятна на изображении, их интенсивность указывается также как и для тени (по умолчанию 100.)

Создание изображения в виде значка при помощи JavaScript

<img src="automobile.jpg" class="sphere ishine1" />


Эффект увеличения изображения можно активировать добавив к картинке класс izoom со значением от 100 до 200 (по умолчанию 100).

Создание изображения в виде значка при помощи JavaScript

<img src="automobile.jpg" class="sphere izoom200" />


Размер изображения в пикселях можно указать через класс isize минимальное значение 32 пикселя, максимальное не ограничено (по умолчанию исходный размер изображения).

Создание изображения в виде значка при помощи JavaScript

<img src="automobile.jpg" class="sphere isize100" />


Эффект прозрачности объявляется классом ialpha, значения от 1 до 100 (по умолчанию 100).

Создание изображения в виде значка при помощи JavaScript

<img src="automobile.jpg" class="sphere ialpha50" />


Есть и такая функция как смещение изображения влево или вправо от центра для этого используется класс ishift, значения от 1 (изображение будет показано начиная с левого края) до 100 (изображение будет показано начиная с правого края), по умолчанию изображение показывается от центра 50.

Создание изображения в виде значка при помощи JavaScript

<img src="automobile.jpg" class="sphere ishift1" />


Ну вот и всё...

Подробности можно посмотреть в архиве с исходниками.

СКАЧАТЬ

Вес файла
9.53 Kb

Напишите своё мнение