JavaScript实现放大镜的效果的实例

来源：动视网责编：小OO 时间：2020-11-27 20:11:07

JavaScript实现放大镜的效果的实例

思路。先让move块和bimg块隐藏，当鼠标移动到box上时，使move块和bimg块显示，获取鼠标当前的位置，然后经过计算给与move块和bimg块适当的值实现放大镜效果（move块和bimg块的位置的计算后面有详细介绍）。

推荐度：

点击下载本文 文档为doc格式

导读思路。先让move块和bimg块隐藏，当鼠标移动到box上时，使move块和bimg块显示，获取鼠标当前的位置，然后经过计算给与move块和bimg块适当的值实现放大镜效果（move块和bimg块的位置的计算后面有详细介绍）。

相信大家对放大镜效果不会太陌生吧，在我们的开发中，经常会使用到JavaScript实现放大镜的效果，尤其是在开发商城之类的项目，会平凡使用到放大镜效果，那么今天我们就为大家介绍下使用JavaScript实现放大镜的效果的简单实例。

思路：

先让move块和bimg块隐藏，当鼠标移动到box上时，使move块和bimg块显示，获取鼠标当前的位置，然后经过计算给与move块和bimg块适当的值实现放大镜效果（move块和bimg块的位置的计算后面有详细介绍）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <link href="css/bigimg.css" rel="stylesheet" />
 <script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
 <p id="box">
 <img src="images/simg.jpg" alt="#">
 <p id="move"></p>
 <p id="bimg">
 <img id="b_bimg" src="images/bimg.jpg" alt="#">
 </p>
 </p>
</body>
</html>

css样式：

*{
 margin:0px;
 padding:0px;
}
#box{
 width:430px;
 height:430px;
 margin:100px;
 margin-left:17%;
 position:relative;//这里使用相对定位，好让其他的元素能依靠这个元素定位
}
#move{
 background-image:url(../images/move.png);
 width:220px;
 height:220px;
 position:absolute;
 left:0px;
 top:0px;
 display:none;//先让他隐藏，用js使其显示
}
#bimg{
 width:430px;
 height:430px;
 overflow:hidden;
 position:absolute;
 top:0px;
 left:450px;
 display:none;//先让他隐藏，用js使其显示
}
#bimg img{
 width:800px;
 height:800px;
 position:absolute;
 top:0px;
 left:0px;
}

Javascript:

效果图：