• Главная»
  • Уроки»
  • CSS»
  • Всплывающая иконка зума при наведении на изображение

Всплывающая иконка зума при наведении на изображение

Этот урок расскажет Вам как с помощью CSS или jQuery проделать эту хитроумную операцию.

demosourse

Способ №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>

Вот и все! Пользуйтесь на здоровье! :)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.jankoatwarpspeed.com
Перевел: Максим Шкурупий
Урок создан: 9 Июня 2009
Просмотров: 37702
Правила перепечатки

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

^ Наверх ^