效果：
<!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" />
<標題>放大鏡</標題>
<樣式類型=“文字/css”>
＃放大鏡{
寬度：342px；
高度：420px；
位置：絕對；
頂部：100px；
左：250 像素；
字體大小：0；
邊框：1px實心#000；
}
#img{
寬度：342px；
高度：420px；
}
#瀏覽器{
邊框：1px實心#000；
z 索引：100；
位置：絕對；
背景：#555；
}
#mag{
邊框：1px實心#000；
溢出：隱藏；
z 索引：100；
}
</風格>
<腳本類型=“文字/javascript”>
function getEventObject(W3CEvent) { //事件標準化函數
返回 W3CEvent ||視窗.事件;
}
function getPointerPosition(e) { //相容瀏覽器的滑鼠x,y取得函數
e = e ||取得事件物件（e）；
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
返回 { 'x':x,'y':y };
}
function setOpacity(elem,level) { //相容瀏覽器設定透明值
if(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] = prop[i];
}
}
返回元素；
}
變數放大鏡= {
米：空，
初始化：函數（放大）{
var m = this.m = magni || {
cont : null, // 載入原始圖片的div
img : null, //放大的圖片
mag : null, //放大框
scale : 15 //比例值，設定的值越大放大越大，這裡有問題就是如果不能整除時，會產生一些很小的白邊，目前不知道如何解決
}
css(m.img,{
'位置'：'絕對'，
'width' : (m.cont.clientWidth * m.scale) + 'px', //原始影像的寬*比例值
'height' : (m.cont.clientHeight * m.scale) + 'px' //原始影像的高*比例值
})
css(m.mag,{
'顯示'：'無'，
'width' : 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]為瀏覽框
'display' : 'none', //開始設定為不可見
'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //原始圖片的寬/比例值-邊框的寬度
'height' : m.cont.clientHeight / m.scale - borderWid + 'px', //原始圖片的高/比例值-邊框的寬度
'opacity' : 0.5 //設定透明度
})
m.img.src = m.cont.getElementsByTagName('img')[0].src; //讓原始影像的src值給予放大影像
m.cont.style.cursor = '十字線';
m.cont.onmouseover = 放大鏡.start;
},
開始：函數（e）{
if(document.all){ //只在IE下執行，主要避免IE6的select無法覆寫
放大鏡.createIframe(放大鏡.m.img);
}
this.onmousemove = 放大鏡.move; //this指向m.cont
this.onmouseout = 放大鏡.end;
},
移動：函數（e）{
var pos = getPointerPosition(e); //活動標準化
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(放大鏡.m.img,{
'頂部' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
'左' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
})
},
結束：函數（e）{
this.getElementsByTagName('div')[0].style.display = 'none';
放大鏡.removeIframe(放大鏡.m.img); //引入iframe
magnifier.m.mag.style.display = '無';
},
創建Iframe：函數（元素）{
var 層 = document.createElement('iframe');
圖層.tabIndex = '-1';
Layer.src = 'javascript:false;';
elem.parentNode.appendChild(層);
layer.style.width = elem.offsetWidth + 'px';
Layer.style.height = elem.offsetHeight + 'px';
},
刪除Iframe：函數（元素）{
var 層 = elem.parentNode.getElementsByTagName('iframe');
while(layers.length >0){
層[0].parentNode.removeChild(層[0]);
}
}
}
視窗.onload = 函數(){
放大鏡.init({
續：document.getElementById('放大鏡'),
img : document.getElementById('magnifierImg'),
mag : document.getElementById('mag'),
規模：3
});
}
</腳本>
</頭>
<正文>
<div id="放大鏡">
<img src=" css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0]為瀏覽框
'display' : 'none', //開始設定為不可見
'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //原始圖片的寬/比例值-邊框的寬度
'height' : m.cont.clientHeight / m.scale - borderWid + 'px', ////原始圖片的高/比例值-邊框的寬度
'opacity' : 0.5 //設定透明度
})
放大框的大小則設定為與原始影像相同的大小，程式碼如下：
css(m.mag,{
'顯示'：'無'，
'width' : 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' //原始影像的高*比例值
})
由於放大是按照比例進行放大，所以在瀏覽框上和放大圖像上需要仔細計算，這才是該程式的主要思維之一。