Источник:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Лупа</title>
<style type="text/css">
#лупа{
ширина: 342 пикселей;
высота: 420 пикселей;
позиция: абсолютная;
верх: 100 пикселей;
слева: 250 пикселей;
размер шрифта: 0;
граница: 1 пиксель, сплошной #000;
}
#img{
ширина: 342 пикселей;
высота: 420 пикселей;
}
#Браузер{
граница: 1 пиксель, сплошной #000;
z-индекс: 100;
позиция: абсолютная;
фон:#555;
}
#маг{
граница: 1 пиксель, сплошной #000;
переполнение: скрыто;
z-индекс: 100;
}
</стиль>
<тип сценария="текст/javascript">
function getEventObject(W3CEvent) { //事件标准化函数
вернуть W3CEvent || окно.событие;
}
function getPointerPosition(e) { //兼容浏览器的鼠标x,y获得函数
е = е || getEventObject (е);
вар x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return { 'x':x,'y':y };
}
function setOpacity(elem,level) { //兼容浏览器设置透明值
если(elem.filters) {
elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
} еще {
elem.style.opacity = уровень;
}
}
function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值
for(var i in prop) {
if(i == 'непрозрачность') {
setOpacity(elem,prop[i]);
} еще {
elem.style[i] = опора[i];
}
}
вернуть элемент;
}
вар лупа = {
м : ноль,
инициализация: функция (магнит) {
вар м = this.m = магни || {
cont : null, // 装载原始图像的div
img : null, // 放大的图像
mag : null, // 放大框
масштаб: 15的白边,目前不知道如何解决
}
css(m.img,{
«позиция»: «абсолютная»,
'width': (m.cont.clientWidth * m.scale) + 'px', //原始图像的宽*比例值
'height': (m.cont.clientHeight * m.scale) + 'px' //原始图像的高*比例值
})
css(m.mag,{
«дисплей»: «нет»,
'ширина': m.cont.clientWidth + 'px', //m.cont为原始图像,与原始图像等宽
'высота': m.cont.clientHeight + 'px',
«позиция»: «абсолютная»,
'left': m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px', // 放大框的位置为原始图像的右方远10px
'сверху': m.cont.offsetTop + 'px'
})
var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //获取граница的宽
css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0]为浏览框
'дисплей': 'нет', //开始设置为不可见
'width': m.cont.clientWidth / m.scale - borderWid + 'px', //原始图片的宽/比例值 - border的宽度
'height': m.cont.clientHeight / m.scale - borderWid + 'px', //原始图片的高/比例值 - border的宽度
'непрозрачность': 0,5 // 设置透明度
})
m.img.src = m.cont.getElementsByTagName('img')[0].src; // Справочная информация о источнике источника данных
m.cont.style.cursor = 'перекрестие';
m.cont.onmouseover = лупа.start;
},
начало: функция (е) {
if(document.all){ // выбор элементов IE, выбор элементов IE6, выбор элементов
Magnifier.createIframe(Magnifier.m.img);
}
this.onmousemove = лупа.move; //это сообщение m.cont
this.onmouseout = лупа.конец;
},
перемещение: функция (е) {
вар pos = getPointerPosition (е); //事件标准化
this.getElementsByTagName('div')[0].style.display = '';
css(this.getElementsByTagName('div')[0],{
'top': Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this. getElementsByTagName('div')[0].offsetHeight) + 'px',
'left': Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this. getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
})
Magnifier.m.mag.style.display = '';
css(Magnifier.m.img, {
'top': - (parseInt(this.getElementsByTagName('div')[0].style.top) * Magnifier.m.scale) + 'px',
'left': - (parseInt(this.getElementsByTagName('div')[0].style.left) * Magnifier.m.scale) + 'px'
})
},
конец:функция(е){
this.getElementsByTagName('div')[0].style.display = 'none';
Magnifier.removeIframe(Magnifier.m.img); //销毁iframe
Magnifier.m.mag.style.display = 'нет';
},
createIframe: функция (элемент) {
var Layer = document.createElement('iframe');
Layer.tabIndex = '-1';
Layer.src = 'javascript:false;';
elem.parentNode.appendChild(слой);
Layer.style.width = elem.offsetWidth + 'px';
Layer.style.height = elem.offsetHeight + 'px';
},
удалитьIframe: функция (элемент) {
var Layers = elem.parentNode.getElementsByTagName('iframe');
в то время как (layers.length > 0) {
Layers[0].parentNode.removeChild(layers[0]);
}
}
}
window.onload = функция(){
Magnifier.init({
продолжение: document.getElementById('лупа'),
img: document.getElementById('MagnifierImg'),
маг: document.getElementById('mag'),
масштаб: 3
});
}
</скрипт>
</голова>
<тело>
<div id="лупа">
<img src=" css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0]为浏览框
'дисплей': 'нет', //开始设置为不可见
'width': m.cont.clientWidth / m.scale - borderWid + 'px', //原始图片的宽/比例值 - border的宽度
'height': m.cont.clientHeight / m.scale - borderWid + 'px', ////原始图片的高/比例值 - border的宽度
'непрозрачность': 0,5 // 设置透明度
})
放大框的大小则设置为于原始图像相同大小,代码如下:
css(m.mag,{
«дисплей»: «нет»,
'ширина': m.cont.clientWidth + 'px', //m.cont为原始图像
'высота': m.cont.clientHeight + 'px',
«позиция»: «абсолютная»,
'left': m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px', // 放大框的位置为原始图像的右方远10px
'сверху': m.cont.offsetTop + 'px'
})
放大的图像大小为,原始图像大小*比例值,代码如下:
css(m.img,{
«позиция»: «абсолютная»,
'width': (m.cont.clientWidth * m.scale) + 'px', //原始图像的宽*比例值
'height': (m.cont.clientHeight * m.scale) + 'px' //原始图像的高*比例值
})
由于放大是根据比例进行放大,所以在浏览框上和放大图像上需要仔细计算, 这也就毥程序的主要思维之一。