< html xmlns="http://www.w3.org/1999/xhtml">【推奨】JavaScript 画像拡大技術 (虫眼鏡) サンプルコード - www.webdm.cn<br>#magnifier{<br>幅:342px;<br>高さ:420px;<br>位置:絶対;<br>上:100px;<br>左:250px;<br>フォントサイズ:0;<br>境界線:1px実線#000;<br>}<br>#img{<br>幅:342px; <br>高さ:420px;<br>}<br>#Browser{<br>ボーダー:1pxソリッド#000;<br>z-index:100;<br>位置:絶対;<br>背景:#555;<br>}<br>#mag{<br>ボーダー:1pxソリッド#000 ; <br> overflow:hidden;<br> z-index:100;<br>}<br><br>function getEventObject(W3CEvent) {//イベント正規化関数 <br> return W3CEvent | | window.event;<br>}<br>function getPointerPosition(e) {//ブラウザ互換マウス x, y get function<br> e = e || var x = e.pageX || (document.documentElement.scrollLeft || document.body.scrollLeft));<br> var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));<br> <br> return { 'x':x,'y':y };<br>}<br>function setOpacity(elem,level) {//互換性のあるブラウザの透明な値を設定します<br> if(elem.filters) {<br> elem.style.filter = 'alpha( opacity=' + level * 100 + ')';<br> } else {<br> elem.style.opacity = level;<br> }<br>}<br>function css(elem,prop) { //CSS値を簡単に設定できるCSS設定関数, そして、透明な値の設定と互換性があります<br> for(var i in prop) {<br> if(i == 'opacity') {<br> setOpacity(elem,prop[i]);<br> } else {<br> elem.style[i] ] = prop[ i];<br> }<br> }<br> return elem;<br>}<br>var magniifier = {<br> m : null,<br> <br> init:function(magni){<br> var m = this.m = magni || : null, / /元の画像の div を読み込みます<br> img: null, //拡大画像<br> mag: null, //倍率ボックス<br>scale: 15 //スケール値、設定された値が大きいほど、倍率も大きくなります,しかし、ここで問題があります。分割できない場合、いくつかの小さな白いエッジが生成されるということです。現時点では、それを解決する方法がわかりません。 'absolute',<br> 'width' : (m.cont.clientWidth * m.scale) + 'px', //元の画像の幅 * 比率の値 <br> 'height' : (m.cont.clientHeight * m. scale) + 'px' //元の画像の高さ * 比率の値 <br> } )<br> <br> css(m.mag,{<br> 'display' : 'none',<br> 'width' : m.cont.clientWidth + ' px', //m.cont は元の画像で、元の画像と同じ幅です <br> ' height' : m.cont.clientHeight + 'px',<br> 'position' : 'absolute',<br> 'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//ボックスを拡大します。位置は元の画像の 10 ピクセル右です。 /境界線の幅を取得します<br> <br> css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div') [0] はブラウジング ボックスです<br> 'display' : 'none', //非表示設定開始<br> 'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //元画像の幅/ 比例値 - ボーダーの幅<br> 'height ' : m.cont.clientHeight / m.scale - borderWid + 'px',//元の画像の高さ/比例値 - 境界線の幅 <br> 'opacity' : 0.5//透明度を設定 <br> })<br> <br> m.img.src = m.cont.getElementsByTagName('img')[0].src;//元画像のsrc値を拡大画像に与える<br> m.cont.style.cursor = 'crosshair' ;<br> <br> m.cont.onmouseover = magnifier.start;<br><br> },<br> <br> start:function(e){<br> <br> if(document.all){//主に IE6 の選択が上書きされるのを避けるために、IE でのみ実行されます<br> magnifier.createIframe(magnifier.m.img);<br> } <br> <br> this.onmousemove = magnifier.move;//これは m.cont を指します<br> this.onmouseout = magnifier.end;<br>},<br> <br> move:function(e){<br> var pos = getPointerPosition(e); //イベントの標準化 <br> <br> this.getElementsByTagName('div')[0].style.display = '';<br> <br> css(this.getElementsByTagName('div')[0],{<br> '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',<br> '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 が許可されます。ブラウジング ボックスは画像を超えません<br> })<br> <br> magnifier.m.mag.style.display = '';<br> <br> css(magnifier.m.img,{<br> 'top' : - (parseInt(this.getElementsByTagName( 'div' )[0].style.top) * magnifier.m.scale) + 'px',<br> 'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m .scale) + 'px'<br> })<br> <br> },<br> <br> end:function(e){<br> this.getElementsByTagName('div')[0].style.display = 'none';<br> 拡大鏡。 RemoveIframe(magnifier .m.img); //iframe を破棄します<br> <br> magnifier.m.mag.style.display = 'none';<br> },<br> <br> createIframe:function(elem){<br> varlayer = document.createElement(' iframe') ;<br>layer.tabIndex = '-1';<br>layer.src = 'javascript:false;';<br> elem.parentNode.appendChild(layer);<br> <br>layer.style.width = elem.offsetWidth + 'px ';<br>layer.style.height = elem.offsetHeight + 'px';<br> },<br> <br>removeIframe:function(elem){<br> varlayers = elem.parentNode.getElementsByTagName('iframe');<br> while(layers.length >0 ){<br> Layers[0].parentNode.removeChild(layers[0]);<br> }<br> }<br>}<br>window.onload = function(){<br> magnifier.init({<br> cont : document.getElementById('拡大鏡')、<br> <br></p> <div id="magnifier"> <br><img src="http://up.2cto.com/2012/0309/20120309093024297.jpg" id="img" alt="JavaScript画像拡大技術（虫眼鏡）" ><div id="ブラウザ"></div><br></div><br><div id="mag"><img id="magnifierImg" /></ div><br><スタイルを選択 ="position:absolute;top:200px;left:650px;width:100px;"><br><option>テストを選択</option><br><option>カバーできるかどうか</オプション><br></選択><br></body><br></html><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
