効果：
<!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;
ボーダー:1px ソリッド #000;
}
#img{
幅:342ピクセル;
高さ:420ピクセル;
}
＃ブラウザ{
ボーダー:1px ソリッド #000;
z インデックス:100;
位置:絶対;
背景:#555;
}
#マグ{
ボーダー:1px ソリッド #000;
オーバーフロー:非表示;
z インデックス:100;
}
</スタイル>
<script type="text/javascript">
function getEventObject(W3CEvent) { // イベント标標準化関数数
W3CEvent を返す ||ウィンドウ.イベント;
}
function getPointerPosition(e) { //兼容浏览器のネズミ标x,y获得関数数
e = e || getEventObject(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));
return { 'x':x,'y':y };
}
function setOpacity(elem,level) { //兼容浏览器設置透明值
if(elem.filters) {
elem.style.filter = 'alpha(opacity=' + レベル * 100 + ')';
} それ以外 {
elem.style.opacity = レベル;
}
}
function css(elem,prop) { //css 設定関数, 便利な css 設定, そして互換設定透明
for(prop の変数 i) {
if(i == '不透明') {
setOpacity(elem,prop[i]);
} それ以外 {
elem.style[i] = prop[i];
}
}
要素を返します。
}
var 拡大鏡 = {
m : null、
init:function(magni){
var m = 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,{
'表示' : 'なし',
'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 = magnifier.start;
}、
開始:関数(e){
if(document.all){ //IE 下実行のみ、主に IE6 を回避する選択無法被盖
magnifier.createIframe(magnifier.m.img);
}
this.onmousemove = 拡大鏡.move; //この指向m.cont
this.onmouseout = magnifier.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,{
'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
})
}、
終了:関数(e){
this.getElementsByTagName('div')[0].style.display = 'none';
magnifier.removeIframe(magnifier.m.img); //销毁iframe
magnifier.m.mag.style.display = 'なし';
}、
createIframe:function(elem){
varlayer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:false;';
elem.parentNode.appendChild(layer);
layer.style.width = elem.offsetWidth + 'px';
layer.style.height = elem.offsetHeight + 'px';
}、
RemoveIframe:function(elem){
varlayer = elem.parentNode.getElementsByTagName('iframe');
while(layers.length >0){
レイヤー[0].parentNode.removeChild(レイヤー[0]);
}
}
}
window.onload = function(){
拡大鏡.init({
続き: document.getElementById('magnifier'),
img : document.getElementById('magnifierImg'),
mag : document.getElementById('mag'),
スケール：3
});
}
</script>
</head>
<本文>
<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
'top' : m.cont.offsetTop + 'px'
})
拡大された画像サイズは、元の画像サイズ * 比率、次のようになります。
css(m.img,{
'位置' : '絶対',
'width' : (m.cont.clientWidth * m.scale) + 'px', //原始画像の宽* 比率
'height' : (m.cont.clientHeight * m.scale) + 'px' //元の画像の高*比率
})
拡大は比率に基づいて拡大されるため、視聴パネルと拡大画像で綿密な計算が必要であり、これがこのプログラムの主な目的の 1 つです。