JavaScript画像拡大技術（虫眼鏡）

【推奨】JavaScript 画像拡大技術 (虫眼鏡) サンプルコード - www.webdm.cn #magnifier{ 幅:342px; 高さ:420px; 位置:絶対; 上:100px; 左:250px; フォントサイズ:0; 境界線:1px実線#000; } #img{ 幅:342px; 高さ:420px; } #Browser{ ボーダー:1pxソリッド#000; z-index:100; 位置:絶対; 背景:#555; } #mag{ ボーダー:1pxソリッド#000 ; overflow:hidden; z-index:100; } function getEventObject(W3CEvent) {//イベント正規化関数 return W3CEvent | | window.event; } function getPointerPosition(e) {//ブラウザ互換マウス x, y get function e = e || var x = e.pageX || (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=' + level * 100 + ')'; } else { elem.style.opacity = level; } } function 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 magniifier = { m : null,

init:function(magni){ var m = this.m = magni || : null, / /元の画像の div を読み込みます img: null, //拡大画像 mag: null, //倍率ボックス scale: 15 //スケール値、設定された値が大きいほど、倍率も大きくなります,しかし、ここで問題があります。分割できない場合、いくつかの小さな白いエッジが生成されるということです。現時点では、それを解決する方法がわかりません。 'absolute', 'width' : (m.cont.clientWidth * m.scale) + 'px', //元の画像の幅 * 比率の値 'height' : (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 ピクセル右です。 /境界線の幅を取得します

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 の選択が上書きされるのを避けるために、IE でのみ実行されます magnifier.createIframe(magnifier.m.img); }

this.onmousemove = magnifier.move;//これは 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'; 拡大鏡。 RemoveIframe(magnifier .m.img); //iframe を破棄します

magnifier.m.mag.style.display = 'none'; },

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){ varlayers = elem.parentNode.getElementsByTagName('iframe'); while(layers.length >0 ){ Layers[0].parentNode.removeChild(layers[0]); } } } window.onload = function(){ magnifier.init({ cont : document.getElementById('拡大鏡')、

テストを選択 カバーできるかどうか