この記事では、画像の局所拡大または削減を実現するJSの方法について説明します。次のように、参照のために共有してください。
<!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"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> magnifier </titpe> <スタイル= ""高さ:696px;位置:絶対;トップ:100px;左:250px;フォントサイズ:0;境界線:1pxソリッド#000;}#img {width:500px;高さ:696px;}#browser {border:1px solid#000; z-index:100;位置:絶対;背景:#555;}#mag {border:1px solid#000;オーバーフロー:隠し; z-index:100;} </style> <script type = "text/javascript"> function geteventobject(w3cevent){//イベント正規化関数return w3cevent || window.event;} function getPointerposition(e){//関数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};}関数setopacity(elem、level){//透明値の互換性のあるブラウザ設定(elem.filters){elem.style.filter = 'alpha(opacity =' + level * 100 + ')'; } else {elem.style.opacity = level; }} function css(elem、prop){// css設定関数は、css値を簡単に設定でき、(propのvar i){if(i == 'ofacity'){setopacity(elem、prop [i]); } else {elem.style [i] = prop [i]; }} return elem;} var magnifier = {m:null、init:function(magni){var m = this.m = magni || {null、// div img元の画像の読み込みIMG:null、//スケールMag:null、//スケールフレームスケール:15 //値セットが大きいほど、拡大が大きくなりますが、分裂できない場合、小さな白いエッジが生成されるという問題があります。現時点でそれを解決する方法} css(m.img、{'position': 'absolute'、 'width':(m.cont.clientwidth * m.scale) + 'px'、// width * scale value of the original image'height ':(M.Cont.ClientHeight * m.sca / css(m.mag、{'display': 'none'、 'width':m.cont.clientwidth + 'px'、//m.contは元の画像であり、これは元の画像と同じ幅です。 'px'、//拡大ボックスの位置は元の画像の右側にあります10px 'top':m.cont.offsettop + 'px'})var borderwid = m.cont.getelementsbytagname( 'div')[0] .offsetwidth -m.cont.getelementsbytagname( 'div')[0] .cliientwid; //ボーダーCSSの幅を取得するCSS(m.cont.getelementsbytagname( 'div')[0]、{//m.cont.getelementsbytagname('div') [0]はブラウジングボックス '' 'none'、// settings ':m.cont.clientwidth/m.scale -widwid +' px + 'pxt + 'height':M.Cont.ClientHeight /M.Scale -BorderWid + 'Px'、//元の画像の高さ /スケール値 - 境界線「不透明度」:0.5 // Set Transparency})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){// ieのみでのみ実行します。主にgagnifier.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(pos.y -this.offsettop -parseint(this.getelementsbytagname( 'div')[0] .style.height) / 2,0)、this.clientementsbytagneme(0] div( '。 'px'、 'left':math.min(math.max(pos.x -this.offsetleft -parseint(this.getelementsbytagname( 'div')[0] .style.width) /2,0)、this.clientwidth -this.getelementsbytagname( 'div') browse box width/2、math.max and math.minを参照して、閲覧ボックスが画像を超えないように})magnifier.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.letele.letele.letele.letele.letele.letele.letele.magletele。 }、end:function(e){this.getElementsBytagname( 'div')[0] .style.display = 'none'; MAGNIFIER.REMOVEIFRAME(MAGNIFIER.M.IMG); // iframe magnifier.m.mag.style.display = 'none'を破壊します。 }、createiframe:function(elem){var layer = 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){var layers = elem.parentnode.getelementsbytagname( 'iframe'); while(layers.length> 0){layers [0] .parentnode.removechild(layers [0]); }}} window.onload = function(){magnifier.init({cont:document.getElementbyid( 'gmagnifier')、img:document.getElementbyid( 'magnifierimg')、mag:document.getElementbyid( 'vagnifier')、scale:3});} src = "lib/images/1.jpg" id = "img"/> <div id = "browser"> </div> </div> <div id = "mag"> <img id = "magnifierimg"/> </div> <select style = "position:absolute; top:200px; left:650px; width:optst;上書き</option> </select> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください:「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。