Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера
Наложение информации на изображение
24.06.14, 09:05:46

Скачать файл



Демо

Эффект наложения различного рода информации, подсказок на изображение.

Довольно простой html. Есть основной DIV "portfolio" внутри которого добавляем элементы "portfolio_item". Каждый из элементов имеет DIV "image_wrap" с изображением и DIV "zoom_overlay" с изображением подсказок.

Разметка HTML
Код
<div id="portfolio" class="portfolio">  
  <div class="portfolio_item">  
  <div class="image_wrap">  
  <img src="images/pcvector.jpg" alt="pcvector"/>  
  </div>  
  <div class="zoom_overlay">  
  <img src="images/notes.png" alt="Заметки"/>  
  </div>  
  </div>  
  </div>


CSS

Указываем параметры нашего класса portfolio:
Код
.portfolio{  
  width:500px;  
  margin:0 auto;  
  position:relative;  
  }


Для класса portfolio_item:
Код
.portfolio_item{  
  position:relative;  
  margin:30px auto;  
  }


DIV с классом image_wrap, содержащий, на начальном этапе будет иметь для параметра display значение table_cell
Код
.image_wrap{  
  width:500px;  
  height:291px;  
  display:table-cell;  
  text-align:center;  
  vertical-align:middle;  
  position:relative;  
  cursor:pointer;  
  }


Изображение будет отцентрировано горизонтально и работает это потому что, по умолчанию изображение имеет значение параметра display "inline". И добавим симпатичную тень вокруг изображения.
Код
.image_wrap > img{  
  vertical-align:middle;  
  margin:0 auto;  
  position:relative;  
  -moz-box-shadow:1px 1px 7px #000;  
  -webkit-box-shadow:1px 1px 7px #000;  
  box-shadow:1px 1px 7px #000;  
  }


Наложение DIV будет абсолютным, то есть поверх нашего изображения . Непрозрачность установлена в 0:
Код
.zoom_overlay{  
  width:400px;  
  height:400px;  
  margin:-200px 0px 0px -200px;  
  background:transparent url(../images/overlay.png) repeat top left;  
  position:absolute;  
  top:50%;  
  left:50%;  
  display:none;  
  opacity:0;  
  -moz-border-radius:10px;  
  -webkit-border-radius:10px;  
  border-radius:10px;  
  cursor:pointer;  
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);  
  }


Изначально изображение с подсказками будет скрыто:
Код
.zoom_overlay img{  
  display:none;  
  }


javascript

Прикрепим библиотеку jquery на сайт
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Основная идея состоит в уменьшении изображения и наложения на него изображения с подсказками.
Первым делом помещаем в переменную наш основной DIV:
Код
var $portfolio = $('#portfolio');


Теперь определим, что происходит, когда мы нажимаем на изображение. Анимируем высоту и ширину и сделаем появление наложения.
Код
$portfolio.find('.image_wrap').bind('click',function(){  
  var $elem = $(this);  
  var $image = $elem.find('img:first');  
  $image.stop(true)  
  .animate({  
  'width' :'400px',  
  'height':'233px'  
  },250);  
   
  //the overlay is the next element  
  var opacity = '1';  
  if($.browser.msie)  
  opacity = '0.5'  
  $elem.next()  
  .stop(true)  
  .animate({  
  'width' :'500px',  
  'height' :'291px',  
  'marginTop' :'-145px',  
  'marginLeft':'-250px',  
  'opacity' :opacity  
  },250,function(){  
  //fade in the annotations  
  $(this).find('img').fadeIn();  
  });  
  });


Теперь, определим, что происходит при нажатии на наложенное изображение с подсказками. Нам нужно, чтобы оно исчезло и появилось первоначальное изображение:
Код
$portfolio.find('.zoom_overlay').bind('click',function(){  
  var $elem = $(this);  
  var $image = $elem.prev()  
  .find('img:first');  
  //hide overlay  
  $elem.find('img')  
  .hide()  
  .end()  
  .stop(true)  
  .animate({  
  'width' :'400px',  
  'height' :'233px',  
  'marginTop' :'-116px',  
  'marginLeft':'-200px',  
  'opacity' :'0'  
  },125,function(){  
  //hide overlay  
  $(this).hide();  
  });  
   
  //show image  
  $image.stop(true)  
  .animate({  
  'width':'500px',  
  'height':'291px'  
  },250);  
  });  
  });


Вот и всё.

Чтобы сделать прозрачное изображение с подсказками, нужно будет учесть, что при накладывании оригинальное изображение уменьшается.
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: Наложение, информации, изображение, на
Просмотров: 444 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: