この記事では、参照のためにJSの画像拡大効果を共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <style type = "text/css">＃div1 {width：300px;高さ：300px;位置：相対;マージン：30px auto 0px; }＃div1 img {width：300px; }＃div1 span {width：150px;高さ：150px;背景：赤;位置：絶対;左：0px;上：0px;表示：なし;不透明：0.2; } .show {width：100％;高さ：100％;背景：赤;位置：絶対;左：0px;上：0px; Z-Index：10px;不透明：0.1; }＃div2 {width：300px;高さ：300px;位置：相対;上：-300px;左：300px;表示：なし;オーバーフロー：隠し;マージン：0px auto 0px; }＃img1 {position：absolute; } </style> </head> <body> <div id = "div1"> <！ - picture-> <img src = "images/xiangqing.png"> <！ - マウスチェックボックス - > <span> </span> <！ src = "images/xiangqingda.png"/> </div> </body> <script> //読み込みが完了した後、window.onload = function（）{var odiv = document.getelementbyid（ 'div1'）; var oshow = document.getElementsByClassName（ 'show'）[0]; var osospan = document.getElementsBytagname（ 'span'）[0]; var oimg = document.getElementById（ 'img1'）; // parentNodeは親ノードoshow.onmouseover = function（）{osospan.style.display = 'block';を取得します。 oimg.parentnode.style.display = 'block'; }; oshow.onmouseout = function（）{osospan.style.display = ''; oimg.parentnode.style.display = ''; }; // Amplifier Moves oshow.onmousemove = function（ev）{//ブラウザー互換性の問題var oevent = ev || event; //マウスの位置を取得var x = oevent.offsetx-ospan.offsetwidth/2; var y = oevent.offsety-ospan.offsetheight/2; // console.log（oevent.clienty）; // console.log（odiv.offsettop）; // console.log（osospan.offsetheight/2）; // console.log（oevent.clienty）; if（x <0）{x = 0; } else if（x> oshow.offsetwidth-ospan.offsetwidth）{x = oshow.offsetwidth-ospan.offsetwidth; } if（y <0）{y = 0; } else if（y> oshow.offsetheight-ospan.offsetheight）{y = oshow.offseith-ospan.offsetheight; } //選択したボックスを配置しますosospan.style.left = x+'px'; osospan.style.top = y+'px'; //アンプを配置するvarパーセントx = x/（oshow.offsetwidth-ofpan.offsetwidth）; varパーセンティ= y/（oshow.offseetheight-ospan.offsetheight）; var oimgparent = oimg.parentnode; oimg.style.left = -percentx*（oimg.offsetwidth-oimgparent.offsetwidth）+'px'; oimg.style.top = -percenty*（oimg.offsetheitheight-oimgparent.offseeth）+'px'; }; }; }; </script> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。