JavaScript放大镜效果js源码带详细注释图片的放大js练习小实例
效果图呈上：
body部分源码：
<body>
<div id="small">
<img src="./1.jpg">
<div id="mark"></div> //small嵌套mark
</div>
<div id="big">
<img src="./1.jpg" id="img">
</div>
</body>
CSS部分源码
<style> //标红的均为主要代码，其他的为次要代码可根据个人或者图片需要更改
*{
margin: 0;
padding: 0;
}
#small{
height: 281px;
width: 500px;
position: absolute;
left: 100px; //这个可以更改，但是后面要根据这个进行一些操作
top: 100px;
}
#small img{ //将img在small范围内全部显示出来的css固定样式
height: 100%;
width: 100%;
}
#mark{
height: 100px;
width: 100px;
background: rgba(255, 255, 255, 0.5);
position: absolute; //根据small进行定位，后续进行应用计算
left: 0;
top: 0;
display: none; //默认不显示，根据浏览器事件进行设置
}
#big{
width: 400px;
height: 400px;
position: absolute; //父节点为定位元素，img的定位就有基点
top: 100px;
left: 700px;
border: 1px solid black;
overflow: hidden; //只显示放大的部分
display: none; //默认不显示，根据浏览器事件进行设置
}
#big img{
height: 1125px; //这是原图片大小
width: 2000px;
position: absolute; //根据鼠标事件进行left和top值得动态移动
left: 0;
top: 0;
}
</style>
JavaScript部分源码
<script>
window.onload = function(){
var oSmall = document.getElementById("small")；
var oMark = document.getElementById("mark"); //获取需要进行应用与操作的节点
var oImg = document.getElementById("img");
oSmall.onmouseover = function(){
oMark.style.display = "block"; //在鼠标移入oSmall对象时，oMark设置为显示，oBig设置为显示
oBig.style.display = "block";
document.onmousemove = function(ev){ //在鼠标移入oSmall对象的同事，进行文档中的鼠标移动事件，设置鼠标事件的形参来传入鼠标事件，使用鼠标事件属性
var e = ev || window.event; //对鼠标事件进行浏览器兼容
var l = e.pageX - oSmall.offsetLeft - 50; //e.pagrX获取鼠标基于X轴上在html页面上的坐标位置，返回一个数字，减去oSmall.offsetLeft，也就是oSmall对象的左偏移，减去之后鼠标就可以在oMark对象的左边缘，而- 50 是为了让鼠标处于oMark居中的位置，oMark宽度为100，减去50即居中，优化用户体验
if (l <= 0) { //限制oMark对象的left值出界，如果不懂出界是什么可以删掉四个if语句来观察效果
l = 0;
}
if (l >=400 ) { //400是oSmall的宽度减去oMark的宽度
l = 400;
}
var t = e.pageY - oSmall.offsetTop - 50; //e.pagrY获取鼠标基于Y轴上在html页面上的坐标位置，返回一个数字，减去oSmall.offsetTop，也就是oSmall对象的上偏移，减去之后鼠标就可以在oMark对象的上边缘，最终处于左上角，而- 50 是为了让鼠标处于oMark居中的位置，oMark高度为100，减去50即居中，优化用户体验
if (t <= 0) { //限制oMark对象的top值出界
t = 0;
}
if (t >= 181) { //181是oSmall的高度减去oMark的高度
t = 181;
}
oMark.style.left = l + "px"; //无论是l或者是t返回的都是number类型，需要跟px进行字符串拼接
oMark.style.top = t + "px";
oImg.style.left = l * -4 + 'px'; //这是oBig对象下的oImg对象对应的left值，想更全面的看到语句的作用把big的css的overflow：hidden注释掉然后可以更加全面地观察
oImg.style.top = t * -4 + 'px';
}
}
oSmall.onmouseout = function(){ //鼠标移出则oMark对象和oBig对象全部隐藏
oMark.style.display = "none";
oBig.style.display = "none";
}
}
</script>
如果那些js语句很困惑可以上百度详细看看对应语句的功能与用法，也可以把感兴趣的语句注释掉观察没了那个语句会发生什么变化，还可以在谷歌或者搜狐按F12观察html元素宽度高度对应属性的变化，这是我个人的解惑小技巧，希望能对你也有一些帮助！
