このエフェクトは難しいものではありません。重要なのは位置と比率を設定することです。 マウス位置のキャプチャ、マウス位置領域の決定、onmouseover イベント、onmousemove イベント、onmouseout イベント 大きい画像の表示比率を設定します。小さい画像上に表示されるカット画像の比率は正確である必要があります (できれば 2 倍または 4 倍)。 ここにある画像 m.jpg は 1440X900 です。 コードをコピーします コードは次のとおりです: <メタhttp-equiv="Content- Type" content="text/html; charset=utf-8">虫眼鏡効果<br>* {margin:0;padding:0;}<br>#smallimg{width:360px;float:left;position:relative;border:1px Solid red;}<br>#smallimg img{ width :360px;}<br> #bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px Solid #ccc;display:none;}<br>#showimg{width:100px;高さ:100px;背景:# fff;カーソル:移動; 位置:絶対;ボーダー:1px ソリッド #666;不透明度:0.5;フィルター:アルファ(不透明度=50);表示:なし;}<br> <br>var $=function(id){return typeof id=="string"?document.getElementById(id):id}<br> var smallimg = $("smallimg");<br>var showimg = $("showimg");//画像をフィルター処理します<br>var bigimg = $("bigimg");<br>var small_url = smallimg.getElementsByTagName ( "img")[0].getAttribute("src");<br>var show_half = maxWidth = maxHeight = 0;<br>smallimg.onmouseover = function(){<br> showimg.style.display = "block " ;<br> bigimg.style.display = "inline";<br> show_half = showimg.offsetHeight/2;<br> maxWidth = smallimg.clientWidth - showimg.offsetWidth;<br> maxHeight = smallimg.clientHeight - showimg. ;<br> //上記の 2 つの変数は、showimg が移動できる領域を示します<br>};<br>smallimg.onmousemove = function(e){<br> var e=window.event?window.event: e; <br> var num=bigimg.clientWidth/showimg.clientWidth;<br> var Top = e.clientY - smallimg.offsetTop - show_half;<br> var Left = e.clientX - smallimg.offsetLeft - show_half;<br> / /現在の移動表示位置を取得します。計算方法は、マウス座標 - 一番外側のコンテナの座標 - ボックスの幅 (高さ) / 2 <br> Top = TopmaxHeight? maxHeight:Top;<br> Left = LeftmaxWidth?maxWidth:Left;<br> showimg.style.top = 上 "px";<br> showimg.style.left = 左 "px" ;<br> bigimg.style .background = "url(" small_url ") -" Left*num "px -" Top*num "px no-repeat";<br>};<br>smallimg.onmouseout = function( ){<br> showimg.style.display="none";<br> bigimg.style.background ="";<br> bigimg.style.display="none"<br>};<br></スクリプト><br>< /body><br></html><br></p> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
