今日の練習は、オンライン ショッピング サイトでよくある、画像の詳細を紹介する虫眼鏡エフェクトを作成することです。簡単に言うと、拡大された効果を確認できるように、画像内に対応する領域があります。
レイアウトについて: 2 つの div セットで、最初の大きな div セットには画像が含まれ、小さな div はカバーレイヤーです。 2 番目のグループは、大きな画像 div 表示ボックスです。このボックスでは、画像が拡大され、余分な部分が隠されています。窓から外を見ていると想像できます。見えているのはその一部にすぎません。
思考: それは両側の比率、重要なポイント、比率です。何も言わずに、ただコードに進みましょう。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0 ; padding:0;} #left{width:300px; height:300px; border:1px solid gold; position:relative; float:left; margin-right:20px; left:10px; top:10px;} #left img{width:300px; height:300px;} #mask{width:90px; height:90px; background:greenyellow; opacity: 0.5; position: absolute; top:0; left:0; display:none; cursor: move;} #big{width:600px; height:600px; overflow: hidden; float: left; position:relative; left: 10px; top:10px; display:none; border:1px solid goldenrod;} #big img{position: absolute; left:0; top:0;} </style> </head> <body> <div id="left"> <img src="img/5-140526101943.jpg" /> <div id="mask"></div> </div> <div id="big"> <img src="img/5-140526101943.jpg" /> </div> <script> // 左边遮罩层与左边显示框大小的比例对应大图显示区与图片的比例 window.onload = function(){ var left = document.getElementById("left"); var mask = document.getElementById("mask"); var big = document.getElementById("big"); var bigImg = big.children[0]; //鼠标移入，遮罩层显示，大图显示区显示 left.onmouseenter = function(){ mask.style.display = big.style.display ='block'; }; //鼠标移出，遮罩层隐藏，大图显示区隐藏 left.onmouseleave = function(){ mask.style.display= big.style.display = 'none'; }; //鼠标移动，遮罩层跟随鼠标，大图显示相关内容 left.onmousemove = function(ev){ //兼容IE var ev = ev || event; //マウスはマスクレイヤーの中央に表示されます。マウスの位置 - 表示領域から本体までの距離 - マスクレイヤーの半分 // 以下はマスクに割り当てられた距離です。レイヤーなのでマイナスを使用し、マウスの位置を変更します。マスクレイヤーを戻すには減算を使用する必要があります
これが完成したエフェクトです。画像ファイルを挿入する方法がわかりません。自分で写真を撮ってアドレスを変更するのは問題ありません。マスクレイヤーと表示領域の画像が異なる場合は、サイズを変更するだけで済みます。マスクレイヤーの。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
