このエフェクトは難しいことではありません。重要なのは位置と比率を設定することです。
マウス位置のキャプチャ、マウス位置領域の決定、および onmouseover イベント、onmousemove イベント、onmouseout イベント
大きい画像の比率を設定します。小さい画像上に表示されるカット画像の比率は、できれば 2 倍または 4 倍にする必要があります。
ここにある画像 m.jpg は主に幅に注意してください。
次のようにコードをコピーします。
<!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">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>虫眼鏡効果</title>
<style type="text/css">
*{マージン:0;パディング:0;}
#smallimg{幅:360px;float:left;position:relative;border:1px ソリッドレッド;}
#smallimg img{幅:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px Solid #ccc;display:none;}
#showimg{幅: 100px;高さ: 100px;背景:#fff;カーソル:移動;位置:絶対;境界線:1px 実線 #666;不透明度:0.5;フィルター:アルファ(不透明度 = 50);表示:なし;}
</スタイル>
</head>
<本文>
<div id="smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<script type="text/javascript">
var $=function(id){id の戻り値 =="string"?document.getElementById(id):id}
var smallimg = $("smallimg");
var showimg = $("showimg");//画像をフィルタリングする
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = function(){
showimg.style.display = "ブロック";
bigimg.style.display = "インライン";
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth;
maxHeight = smallimg.clientHeight - showimg.offsetHeight;
//上記の 2 つの変数は、showimg がアクティブにできる領域を示します。
};
smallimg.onmousemove = function(e){
var e=window.event?window.event:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - smallimg.offsetTop - show_half;
var Left = e.clientX - smallimg.offsetLeft - show_half;
//現在移動中の表示位置を求める計算方法は、マウス座標 - 一番外側のコンテナの座標 - ボックスの幅（高さ）/2
トップ = トップ<0?0:トップ>maxHeight?maxHeight:Top;
Left = Left<0?0:Left>maxWidth?maxWidth:Left;
showimg.style.top = トップ + "ピクセル";
showimg.style.left = 左 + "ピクセル";
bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px 繰り返しなし";
};
smallimg.onmouseout = function(){
showimg.style.display="none";
bigimg.style.background="";
bigimg.style.display="なし"
};
</script>
</body>
</html>