1 112 В этом коротком руководстве мы покажем вам, как можно получить анимацию изображения с помощью jQuery и CSS. Смысл анимации состоит в том, что человечек на фото следит глазами за курсором мыши. Таким образом вы сможете проделать этот трюк со своим фото или фото ваших друзей.
Для начала мы приведем пример без использования CSS спрайтов.
Далее представлен JS код обнаружения позиции курсора мыши относительно изображения и смены классов для этого изображения.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<!DOCTYPE html> <html> <head> <title>JQuery Mouse Direction</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { var img_x1, img_x2, img_y1, img_y2; function set_xy_img() { img_x1 = $('#container div').offset().left; img_x2 = $('#container div').offset().left + $('#container div').width(); img_y1 = $('#container div').offset().top; img_y2 = $('#container div').offset().top + $('#container div').height(); } set_xy_img(); $(window).resize(function() { set_xy_img(); }); $(document).mousemove(function(e){ $('#container div').removeAttr('class'); // front image if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX > img_x1 && e.pageX < img_x2) { $('#container div').addClass('front'); } else // top image if (e.pageY < img_y1 && e.pageX > img_x1 && e.pageX < img_x2) { $('#container div').addClass('top'); } else // bottom image if (e.pageY > img_y2 && e.pageX > img_x1 && e.pageX < img_x2) { $('#container div').addClass('bottom'); } else // left image if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX < img_x1) { $('#container div').addClass('left'); } else // right image if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX > img_x2) { $('#container div').addClass('right'); } else // top left image if (e.pageY < img_y1 && e.pageX < img_x1) { $('#container div').addClass('top-left'); } else // top right image if (e.pageY < img_y1 && e.pageX > img_x1) { $('#container div').addClass('top-right'); } else // bottom left image if (e.pageY > img_y1 && e.pageX < img_x1) { $('#container div').addClass('bottom-left'); } else // bottom right image if (e.pageY > img_y1 && e.pageX > img_x1) { $('#container div').addClass('bottom-right'); } }); //console.log($('#container div').offset()); $('#container div').mouseover(function() { //$(this).removeAttr('class'); //$(this).addClass('front'); }); $('#container div').mouseout(function() { $(this).removeAttr('class'); $(this).addClass('top'); }); }); </script> <style> #container { margin-top:200px; } #container div { margin: 0 auto; width: 150px; height: 150px; } .front { background: url('img/luffy-front.jpg'); } .top { background: url('img/luffy-top.jpg'); } .bottom { background: url('img/luffy-bottom.jpg'); } .left { background: url('img/luffy-left.jpg'); } .right { background: url('img/luffy-right.jpg'); } .top-left { background: url('img/luffy-top-left.jpg'); } .top-right { background: url('img/luffy-top-right.jpg'); } .bottom-left { background: url('img/luffy-bottom-left.jpg'); } .bottom-right { background: url('img/luffy-bottom-right.jpg'); } </style> </head> <body> <div id="container"> <div class="front"></div> </div> </body> </html> |
Обновлено: Мы поправили исходники примера с учетом применения CSS спрайтов.
Теперь анимация более плавная.
Здравствуйте, отличная статья. Спасибо.
Подскажите, пожалуйста, как сделать ссылки в коде на свои картинки (серия картинок), расположенные на компьютере в определенной папке в этом месте (никак не получается):
Необходимо ли еще что-то менять для анимации, когда картинки (серия картинок как в Вашем примере) лежат в папке?
Путь
background: url('img/luffy-front.jpg');является относительным к css файлу.Например ваш css файл лежит в папке
c:/1тогда файлы изображения согласно этому коду должны лежать в
c:/1/img