Эффект загибающегося уголка у изображения

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

Пример этого эффекта вы можете видеть ниже:

Шаг 1.

Скачаем и подключим к нашему документу скрипт cvi_curl_lib.js.

<script type="text/javascript" src="cvi_curl_lib.js"></script>

...а также впишем между тегами <head> следующий код:

<script type="text/javascript">
<!--
function toggleCurl(obj) {
cvi_curl.defaultSize = 50;
cvi_curl.defaultColor = "#ffeeaa";
if(obj.tagName.toUpperCase() != 'IMG') {
cvi_curl.remove(obj);
}else {
cvi_curl.add(obj);
}
}
var size = 100;
var direct = true;
function increase(obj) {
var max = 100;
if(obj.tagName.toUpperCase() != 'IMG') {
if(!direct && size>5 || size>=max) {
direct = false; size -= 5;
}else if(direct && size<=5 || size<max) {
direct = true; size += 5;
}
cvi_curl.modify(obj, {size: size });
}
}
window.onload = function () {
cvi_curl.add(document.getElementById("effect"), {size: 100 });
};
-->
</script>

Шаг 2.

Подготовим изображение или скачаем, используемое в примере.

Это изображение поместим в тег <div> со следующими свойствами:

<div onmousemove="increase(document.getElementById('effect'));">
<img src="images/example.jpg" id="effect">
</div>

Обратите внимание, что изображению необходимо указать идентификатор "effect".

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.netzgesta.de
Перевел: Сергей Патин
Урок создан: 23 Марта 2009
Просмотров: 22795
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 23 Марта 2009 21:32
    Сергей_Патин
    Увлекательное занятие - разогнуть уголок до конца! )))
  • 23 Марта 2009 21:56
    Сергей
    Исправьте ссылочку на шаге 1 не скачивается скрипт cvi_curl_lib.js
  • 23 Марта 2009 21:58
    dima
    хе.. у меня не получаетсо доконца разогнуть уголок хыхы ^^) зы: прекольный эффект))
  • 23 Марта 2009 21:59
    Дмитрий
    ага)) Зато есть занятие на вечер))
  • 23 Марта 2009 22:16
    kickerps
    Интересная штучка =)
  • 24 Марта 2009 00:16
    MIKA
    Интересный урок! Спасибо! А кто подскажет где можна найти урок, как зделать регистрацию пользователей на сайте?
  • 24 Марта 2009 05:41
    dima
    MIKA, зырь этот пост (комменты): http://www.ruseller.com/lessons.php?rub=32&id=106
  • 24 Марта 2009 11:07
    Aleksandr
    Этот уголок у меня реагирует на движение мышки, т.е. водишь мышью - он загибается, отгибается. Тупость!
  • 24 Марта 2009 19:46
    MIKA
    dima - БОЛЬШОЕ СПАСИБО!!!! Скачиваю Ваш оптимизированый скрипт и ожыдаю урока от kickerps! :) mika.pmm@gmail.com
  • 25 Марта 2009 18:14
    Сергей
    Все хорошо, но он загибается и отгибается только когда водишь мышью:(
  • 26 Марта 2009 12:54
    SergStril
    Интересный эффект. Только уголок как-то чересчур хаотично загибается и отгибается.
  • 30 Марта 2009 18:55
    vikycia
    вопрос зачем вам загибающий угол? для развлечения?
  • 22 Мая 2010 18:08
    Николай
    Немного раздражает.
  • 1 Марта 2011 18:19
    Ygreec
    надо убрать постоянное реагирование, а то бегает туда-сюда при движении мыши, некрасиво... а так - интересная идея
  • 9 Апреля 2011 21:05
    nethak
    Жутко неадекватный скрипт, этот эффект слишком неадекватен, не хватит ли просто загнуть при наведении? А ещё полезней было бы если применить класс и угол просто бы подогнулся, очень часто требуется такой эффект и уходит куча времени на фотошоп. В общем в топку, народ не качайте не позорьте свои проекты.
^ Наверх ^