JavaScript如何制作放大镜效果？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！
实现原理：使用2个div，里面分别放大图片和小图片，在小图片上应该还有一个遮罩层，通过定位遮罩层的位置来定位大图片的相对位置，而且，遮罩层的移动应该和大图片的移动方向相反
关键： 大图片和小图片大小比例应该和遮罩层的大小和放大显示区域的比例相同；
难点： 计算遮罩层来显示相应大图片的位置
话不多说直接看代码
代码
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如何制作放大镜效果大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
