この記事では、画像の局所拡大または削減を実現する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プログラミングに役立つことを願っています。