この記事の内容は、JavaScript での虫眼鏡効果の実現に関するものです (コード例)。必要な方は参考にしていただければ幸いです。
実装原理: 画像と小さい画像をそれぞれ拡大する 2 つの div を使用します。小さい画像にはマスク レイヤが存在する必要があります。マスク レイヤーを配置して、大きな画像の相対的な位置を決定します。マスク レイヤーの移動は、大きな画像の移動とは逆方向にする必要があります。
Key: サイズ大きい画像と小さい画像の比率 マスクレイヤーのサイズと拡大表示領域の比率と同じである必要があります;
難易度: 表示するマスクレイヤーを計算します対応する大きな画像の位置
さっそくコードを見てみましょう
code
html:
<div id="small"> <div id="pic1"> <img src="62-130501163925.jpg" alt=""> </div> <div id="mask"></div> </div> <div id="big"> <div id="pic2"> <img src="62-130501163925.jpg" alt=""> </div> </div>
css
#small{ width: 500px; height: 312px; position: absolute; left: 20px; top: 20px; } #pic1{ position: absolute; left: 0px; top: 0px; } #pic1 img{ width: 100%; height: 100%; } #big{ width: 200px; height: 200px; position: absolute; right: 50px; top: 50px; border: 1px solid blue; overflow: hidden; } #pic2{ width: 1000px; height: 625px; position: absolute; left: 0; top: 0; } #pic2 img{ width: 100%; height: 100%; } #mask{ width: 100px; height: 100px; background: black; opacity: 0.3;/*让遮罩层看起来透明*/ filter: alpha(opacity = 30);/*兼容不同的浏览器*/ position: absolute; display: none; }
js
window.onload = function(){//文档内容加载完之后再执行 //当鼠标移入小图片,显示遮罩层和放大的区域 $('small').onmouseenter = function(){ $('mask').style.display = 'block'; $('big').style.display='block'; } //鼠标移出时,隐藏遮罩层和放大的区域 $('small').onmouseleave = function(){ $('mask').style.display='none'; $('big').style.display="none"; } //鼠标移动 $('small').onmousemove = function(ev){ var e = ev || window.event; //计算鼠标的位置,并让鼠标显示在遮罩层的中间 var l = e.clientX - $('small').offsetLeft - 50; var t = e.clientY - $('small').offsetTop -50; //别让遮罩层移出图片 if(l <= 0){ l = 0; } if(l >= 500 - 100){ l = 400; } if(t <= 0){ t = 0; } if(t >= 312 - 100){ t = 212; } //遮罩层的移动 $('mask').style.left = l + 'px'; $('mask').style.top = t + 'px'; //通过遮罩层移动,来计算出放大后图片的显示区域 $("pic2").style.left = -$("mask").offsetLeft * 2 + 'px'; $("pic2").style.top = -$("mask").offsetTop * 2 + 'px'; } } //为了更容容易的获取id function $(id){ return document.getElementById(id); }
以上がJavaScript は虫眼鏡の効果を実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。