Вы вошли как Гость | Группа "Гости" | RSS

Главная » 2010 » Ноябрь » 2 » zoom картинки
00:54
zoom картинки



zoom картинки

Данный плагин реализует зум изображения — при наведении мышкой на картинку всплывает небольшое окошко 50х50, в котором находится увеличенная копия изображения, причём если водить мышкой по изображению, то изображение в окошке тоже будет прокручиваться.

Скрипт проверен в браузерах Opera, Firefox и IE.

Установка:

1. Задайте картинкам, к которым нужно применить зум, класс zoomimage. Пример:

Code
<img class="zoomimage" src="$OTHER_1$" />

2. В конец BODY установите сам плагин:

Code
<script type="text/javascript">
function Zoom(imgclass) {
  function addEvent(object, type, handler) {
  function handle(e) {
  e = e || window.event;
  if (!e.pageX || !e.pageY) {
  var html = document.documentElement,
  body = document.body;
  e.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
  e.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
  }
  handler.call(object, e);
  }
  if (object.addEventListener) {
  object.addEventListener(type, handle, false);
  } else {
  object.attachEvent('on' + type, handle);
  }
  }
  function getOffset(element) {
  var offsetLeft = 0,
  offsetTop = 0;
  do {
  offsetLeft += element.offsetLeft;
  offsetTop += element.offsetTop;
  } while (element = element.offsetParent)
  return {
  top: offsetTop,
  left: offsetLeft
  }
  }
  function getElementsByClassName(imgclass) {
  if (document.getElementsByClassName) {
  return document.getElementsByClassName(imgclass);
  } else {
  var nodes = document.getElementsByTagName('*'),
  tmp = [];
  for (var i = 0; i < nodes.length; i++) {
  if (new RegExp('\\b' + imgclass + '\\b').test(nodes[i].className)) {
  tmp.push(nodes[i]);
  }
  }
  return tmp;
  }
  }
  var images = getElementsByClassName(imgclass);
  for (var i = 0; i < images.length; i++) {
  var tip = document.createElement('DIV');
  tip.style.cssText = 'overflow: hidden; display: none; width: 50px; height: 50px; border: 1px solid #EEEEEE; position: absolute; background: #FFFFFF;';
  images[i].offset = getOffset(images[i]);
  images[i].parentNode.insertBefore(tip, images[i].nextSibling);
  addEvent(images[i], 'mouseover', function () {
  this.nextSibling.innerHTML = '<img src="' + this.src + '" width="' + (this.offsetWidth * 2) + '" height="' + (this.offsetHeight * 2) + '" />';
  this.nextSibling.style.display = 'block';
  });
  addEvent(images[i], 'mouseout', function () {
  this.nextSibling.style.display = 'none';
  });
  addEvent(images[i], 'mousemove', function (event) {
  var tip = this.nextSibling,
  img = tip.firstChild;
  tip.style.top = event.pageY + 10;
  tip.style.left = event.pageX + 10;
  img.style.marginTop = -event.pageY * 2 + this.offset.top * 2 + 25;
  img.style.marginLeft = -event.pageX * 2 + this.offset.left * 2 + 25;
  });
  }
}
Zoom('zoomimage');
</script>

В конце кода мы видим вызов Zoom('zoomimage'); — так вот, zoomimage — это и есть класс изображений, можно менять на свой при необходимости.

Материал взят с сайта infoscript.ru



Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML





    Просмотров: 1555 | Добавил: ed127 | Теги: zoom картинки | Рейтинг: 0.0/0 | |
    Новости по теме:
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Сделать бесплатный сайт с uCoz

    www.owi.3dn.ru © Все права защищены! 2010-2011 Сайт оптимизирован под разрешение экрана 1280х1024 и браузеры Mozila Firefox
    Загрузка...