Главная->Уроки по css->Всплывающая иконка зума при наведении на изображение
Всплывающая иконка зума при наведении на изображение
Этот урок расскажет Вам как с помощью CSS или jQuery проделать эту хитроумную операцию. Способ №1: CSS Как Вы уже догадались, такого эффекта можно достичь используя только CSS. Внутри каждой ссылки имеется пустой тег </span> <div id="gallery1"> <h2>CSS solution</h2> <a href="3029990904_d10cc4fd9d_o.jpg"> <span></span> <img src="3029990904_6fc619349d_m.jpg" alt="" /> </a> <a href="3036302292_d37001ed77_o.jpg"> <span></span> <img src="3036302292_61f44a917c_m.jpg" alt="" /> </a> </div> Все работает благодаря тому, что абсолютно позиционированый элемент <span> находится в относительно позиционированой ссылке. У <span> есть фоновое изображение, которое является иконкой зума. Ширина и высота <span> должна равняться размеру иконки. Можно задать расположение иконки меняя position на top/bottom/left/right. #gallery1 {width:100%; overflow:hidden;} #gallery1 a {position:relative; float:left; margin:5px;} #gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;} #gallery1 img { border: solid 1px #999; padding:5px;} #gallery1 a:hover span { display:block;} Способ №2: jQuery Все можно сделать еще проще с помощью jQuery. Мы можем, например, избавиться от элементов <span> и добавлять их динамически. Также мы можем добавлять анимацию. В таком случае, код HTML будет намного проще: <div id="gallery2"> <h2>jQuery solution</h2> <a href="3029990904_d10cc4fd9d_o.jpg"> <img src="3029990904_6fc619349d_m.jpg" alt="" /> </a> <a href="3036302292_d37001ed77_o.jpg"> <img src="3036302292_61f44a917c_m.jpg" alt="" /> </a> </div> Следующий код необходимо вставить между тегами <head></head>: <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#gallery2 a").append("<span></span>"); $("#gallery2 a").hover(function(){ $(this).children("span").fadeIn(600); },function(){ $(this).children("span").fadeOut(200); }); }); </script> Вот и все! Пользуйтесь на здоровье! :)
