ブログを初めて投稿したとき、私は少し興奮していました。私は今天安会にいます。将来、フロントエンド業界で働きたいと思っていますが、長い間勉強することはできません。私の学習プロセスと利益を記録するために、私はもちろん統合です。私が書いたものは、大きな雄牛ほど背が高くないかもしれませんが、それらは基本的な内容にすぎません。もちろん、私は良いと思ういくつかの良い記事も集めます（実際、私はそれらを最も理解することができます...）。私は将来ハイエンドを書くことができると信じています。来て！
私は少しナンセンスを話し、深刻な問題について話します。数日前、私はタンツー教育の教育ビデオを見ました。教師はjQueryを使用して虫眼鏡の効果を実現しました（先生は、それが遅すぎると言い、彼は飛び回って見ていました）。私はjqueryをよく学んでいないので、基本的なコードはまだ理解できるので、現在学んでいるJSで練習したいと思います。
アイデア：最初に移動ブロックとBIMGブロックを非表示にします。マウスがボックスに移動すると、移動ブロックとBIMGブロックが表示され、マウスの現在の位置が取得されます。次に、計算後、拡大ガラス効果を実現するために、移動ブロックとBIMGブロックの適切な値が与えられます（移動ブロックとBIMGブロックの位置の計算については後で詳しく説明します）
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>拡大ガラス</title> <link href = "css/bigimg.css" rel = "styleSheet"/> <script src = "js/big onload> <> < id = "box"> <img src = "images/simg.jpg"> <div id = "move"> </div> <div id = "bimg"> <img id = "b_bimg"> src = "images/bimg.jpg"> </div> </div> </body> </html>
CSSスタイル：
*{マージン：0px;パディング：0px;}＃box {width：430px;高さ：430px;マージン：100px;マージン左：17％;位置：相対; //ここで相対的な位置付けを使用して、他の要素がこの要素に依存して位置} #move {background-image：url（../ images/move.png）;幅：220px;高さ：220px;位置：絶対;左：0px;上：0px;表示：なし; //最初に非表示にし、JSを使用して表示} #bimg {width：430px;高さ：430px;オーバーフロー：隠し;位置：絶対;上：0px;左：450px;表示：なし; //最初に非表示にし、JSを使用して表示} #bimg img {width：800px;高さ：800px;位置：絶対;上：0px;左：0px;}JavaScript：
function bigimg（）{var bbox = document.getElementById（ "box"）; var bmove = document.getElementById（ "Move"）; var bbimg = document.getElementById（ "bimg"）; var b_bimg = document.getElementById（ "b_bimg"）; bbox.onmouseover = function（）{//マウスをボックスに移動して大きな写真を表示し、bbimg.style.display = "block"を選択します。 bmove.style.display = "block"; } bbox.onmouseout = function（）{// mousemoveは、ボックスがマウスbbimg.style.display = "none"から離れて移動したときに大きな写真とチェックボックスを表示しません。 bmove.style.display = "none"; } bbox.onmouseMove = function（e）{//マウスの位置var x = e.clientx; //ビューポートに対するマウスの位置var y = e.clienty; var t = bbox.offsettop; //ビューポートに対するボックスの位置var l = bbox.offsetLeft; var _ left = x -l -bmove.offsetwidth/2; //移動の位置を計算var _top = y -t -bmove.offseTheight/2; if（_top <= 0）// box_top = 0の上部にスライドします。 else if（_top> = bbox.offseetheight-bmove.offsetheight）// box_top = bbox.offseetheight-bmove.offsetheight; if（_ left <= 0）// box_left = 0の左端にスライドします。 else if（_left> = bbox.offsetwidth-bmove.offsetwidth）// box_left = bbox.offsetwidth-bmove.offsetwidthの右端にスライドします。 bmove.style.top = _top + "px"; //移動bmove.style.left = _ left + "px"の位置を設定します。 var w = _left/（bbox.offsetwidth-bmove.offsetwidth）; //移動比を計算var h = _top/（bbox.offsetheight-bmove.offseetheigh）; var b_bimg_top =（b_bimg.offsetheight-bbimg.offseetheigh）*h; //大画像の位置var b_bimg_left =（b_bimg.offsetwidth-bbidth.offsetwidth）*w; b_bimg.style.top = -b_bimg_top + "px"; //大画像の位置情報b_bimg.style.left = -b_bimg_left + "px"; }}複製画像：
1。移動ブロックの計算
黒い矢印：
var x = e.clientx; //ビューポートに対するマウスの位置var y = e.clienty;
赤い矢印：
var t = bbox.offsettop; //ビューポートに対するボックスの位置var l = bbox.offsetLeft;
オレンジの矢印：
var _Left = x -l -bmove.offsetwidth/2; //移動の位置を計算var _top = y -t -bmove.offseTheigh/2;
2。BIMGブロックの計算
可動範囲内の移動ブロックのスケールを使用して、大きな画像の位置を設定します
移動ブロックの移動範囲：
bbox.offsetwidth-bmove.offsetwidth
可動範囲の移動ブロックアカウントの現在の座標：
var w = _left/（bbox.offsetwidth-bmove.offsetwidth）; //移動比を計算var h = _top/（bbox.offsetheight-bmove.offseetheigh）;
Bimgの動きの範囲：
b_bimg.offsetheight-bimg.offsetheight
Bimgの場所：
var b_bimg_top =（b_bimg.offsetheight-bbimg.offseetheigh）*h; //大画像の位置var b_bimg_left =（b_bimg.offsetwidth-bbidth.offsetwidth）*w;
JSを使用して虫眼鏡の効果を実現する上記の簡単な例は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。