Данный плагин реализует zoom изображения — при наведении мышкой на
картинку всплывает небольшое окошко 50х50, в котором находится
увеличенная копия изображения, причём, если водить мышкой по
изображению, то изображение в окошке тоже будет прокручиваться. Установка: 1. Задайте картинкам, к которым нужно применить zoom, класс zoomimage. Пример: <img class="zoomimage" src="$OTHER_1$" />
2. В конец <BODY> установите сам плагин: <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>
Автор - $USERNAME$.
При копировании материала, ссылка на сайт обязательна!
|
Для Ucoz
Для Dle
Уроки Photoshop
Софт\Программы
Антивирусы
Скачать Игры
TV Online
Рисуем Online
Online Переводчик
Интернет и Сети
Оффис и текст
Системные
Интерфейс
Драйвера
Графика
