JavaScript画像拡大効果とコード説明_画像特殊効果

function getEventObject(W3CEvent) { //イベント正規化関数
return W3CEvent ||
}


function getPointerPosition(e) { //互換性ブラウザのマウス x、y は関数
e = e ||
var x = e.pageX || document.body.scrollLeft を取得します。 ));
var y = e.pageY || (e.clientY (document.documentElement.scrollTop || document.body.scrollTop)); ':y };
}

function setOpacity(elem,level) { //互換性のあるブラウザは透明な値を設定します
if(elem.filters) {
elem.style.filter = ' alpha(opacity=' レベル * 100 ')';
} else {
elem.style.opacity = レベル;

関数 css(elem,prop ) { //CSS値を簡単に設定でき、透明値の設定にも対応したCSS設定関数
for(var i in prop) {
if(i == 'opacity') {
setOpacity(elem, prop[i]);
} else {
elem.style[i] = prop[i]
}
return elem;

var magnifier = {
m : null,

init:function(magni){
var m = this.m = magni || {
cont : null , //元の画像を読み込み div
img : null, // 拡大画像
mag : null, //倍率ボックス
scale : 15 //比率の値、設定した値が大きいほど倍率も大きくなります問題は、割り切れない場合、現時点では解決方法がわかりません。

css(m.img) ,{
'position' : 'absolute',
'width' : (m.cont.clientWidth * m.scale) 'px', //幅*元画像の比率値
'高さ' : (m.cont.clientHeight * m.scale) ' px' //元画像の高*スケール値
})

css(m.mag,{
'display' : 'none',
'width' : m.cont .clientWidth 'px', //m.cont は元の画像で、元の画像と同じ幅です
'height' : m.cont.clientHeight ' px',
'position' : 'absolute',
'left' : m.cont.offsetLeft m.cont.offsetWidth 10 'px', //拡大ボックスの位置は 10 ピクセル右端です元の画像の
'top' : 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 = 'crosshair';

m.cont.onmouseover = magnifier. start;

},

start:function(e){

if(document.all){ //主に IE6 の select を回避するために、IE でのみ実行されます。
magnifier.createIframe(magnifier.m.img);
}

this.onmousemove = magnifier.move; //this を指す m.cont
this.onmouseout = magnifier.end;
},

move:function(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=mouse 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'
})

},

end:function(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'; height = elem.offsetHeight 'px';
},

removeIframe:function(elem){
varlayers = elem.parentNode.getElementsByTagName(' iframe'); .length >0){
layers[0].parentNode.removeChild(layers[0])
}
}
}



ファイルパッケージのダウンロード