<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>
Категория: 
Добавил: 
Теги:
