Article Directory
Effect picture:
demand analysis:
- Move the mouse into the small box, the big box will display, and the mask will display
- Move the mouse out of the small box, hide the big box, and hide the mask
- The mouse moves in the small box, the mask moves with the mouse, and the mouse is in the middle of the mask
- The mask cannot exceed the range of the small box
- The mouse moves in the small box, and the big box displays the corresponding part of the big picture
Source code:
- HTML part
<div id="box" >
<div id="small"><!-- 小图片所在的盒子 -->
<img src="001.jpg" alt="" /><!-- 小图片:350*350 -->
<div id="mask"></div><!-- 遮罩层:175*175 -->
</div>
<div id="big"><!-- 大图片所在的盒子:400*400 -->
<img src="0001.jpg" alt="" id="bigImg"/><!-- 大图片:800*800 -->
</div>
</div>
- css part
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 350px;
height: 350px;
border: 1px solid #000;
margin: 200px;
position: relative;
}
#big{
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
top:0;
left : 360px;
display: none;
}
#mask{
width: 175px;
height: 175px;
background: paleturquoise;
position: absolute;
left:0;
top: 0;
opacity: 0.3;
display: none;
cursor: move;
}
#small{
position: relative;
}
#bigImg{
position: absolute;
left: 0;
top: 0;
}
</style>
- JavaScript part
- In order to simplify the code, first encapsulate some commonly used custom constructors
<script>
// 根据id获取元素
function $id(id){
return document.getElementById(id);
}
// 返回页面被卷曲的距离：垂直,水平
function scroll(){
return {
top:document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset,
left:document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset
}
}
</script>
- The main part of js, you need to use the encapsulated function, just call
<script>
// 获取相关元素
var box = $id('box');//总容器
var smallDiv = $id('small');//小盒子
var maskDiv = $id('mask');//遮罩层
var bigDiv = $id('big');//大盒子
var bigImg = $id('bigImg');//大图片
// 1 鼠标移入小盒子里面
smallDiv.onmouseenter = function(){
// 大盒子显示,mask显示
bigDiv.style.display = 'block';
maskDiv.style.display = 'block';
}
// 2 鼠标移出小盒子
smallDiv.onmouseleave = function(){
// 大盒子隐藏，mask隐藏
bigDiv.style.display = "none";
maskDiv.style.display = "none";
}
// 3 鼠标在小盒子里面移动
smallDiv.onmousemove = function(e){
e = window.event || e;
// mask跟随鼠标移动，鼠标在mask中间
// 如果不出滚动条:e.clientY = e.pageY
// 如果出了滚动条:e.clientY != e.pageY
// 建议使用：e.pageY = e.clientY + scrollTop;
var left = (e.clientX+scroll().left) - box.offsetLeft;
var top = (e.clientY+scroll().top) - box.offsetTop;
// 要鼠标在mask中间
left = left - maskDiv.offsetWidth/2;
top = top - maskDiv.offsetWidth/2;
// 4 边界监测:mask不能超出小盒子范围
if(left<0){
left = 0;
}
if(left>smallDiv.offsetWidth-maskDiv.offsetWidth){
left = smallDiv.offsetWidth-maskDiv.offsetWidth
}
if(top<0){
top = 0;
}
if(top>smallDiv.offsetHeight-maskDiv.offsetHeight){
top=smallDiv.offsetHeight-maskDiv.offsetHeight
}
// 定位mask
maskDiv.style.left = left + 'px';
maskDiv.style.top = top + 'px';
// 5 鼠标在小盒子里面移动，大盒子显示大图的相应部分
// left/smallDiv.offsetWidth = bigImg左移的距离/bigImg.offsetWidth
bigImg.style.left = -left/smallDiv.offsetWidth*bigImg.offsetWidth+"px";
// top/smallDiv.offsetHeight = bigImg上移的距离/bigImg.offsetHeight
bigImg.style.top = -top/smallDiv.offsetHeight*bigImg.offsetHeight+"px";
}
</script>
- Total code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09放大镜</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 350px;
height: 350px;
border: 1px solid #000;
margin: 200px;
position: relative;
}
#big {
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
top: 0;
left: 360px;
display: none;
}
#mask {
width: 175px;
height: 175px;
background: paleturquoise;
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
display: none;
cursor: move;
}
#small {
position: relative;
}
#bigImg {
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div id="box">
<div id="small">
<!-- 小图片所在的盒子 -->
<img src="001.jpg" alt="" /><!-- 小图片:350*350 -->
<div id="mask"></div><!-- 遮罩层:175*175 -->
</div>
<div id="big">
<!-- 大图片所在的盒子:400*400 -->
<img src="0001.jpg" alt="" id="bigImg" /><!-- 大图片:800*800 -->
</div>
</div>
<script>
// 根据id获取元素
function $id(id) {
return document.getElementById(id);
}
// 返回页面被卷曲的距离：垂直,水平
function scroll() {
return {
top: document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset,
left: document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset
}
}
// 获取相关元素
var box = $id('box');//总容器
var smallDiv = $id('small');//小盒子
var maskDiv = $id('mask');//遮罩层
var bigDiv = $id('big');//大盒子
var bigImg = $id('bigImg');//大图片
// 1 鼠标移入小盒子里面
smallDiv.onmouseenter = function () {
// 大盒子显示,mask显示
bigDiv.style.display = 'block';
maskDiv.style.display = 'block';
}
// 2 鼠标移出小盒子
smallDiv.onmouseleave = function () {
// 大盒子隐藏，mask隐藏
bigDiv.style.display = "none";
maskDiv.style.display = "none";
}
// 3 鼠标在小盒子里面移动
smallDiv.onmousemove = function (e) {
e = window.event || e;
// mask跟随鼠标移动，鼠标在mask中间
// 如果不出滚动条:e.clientY = e.pageY
// 如果出了滚动条:e.clientY != e.pageY
// 建议使用：e.pageY = e.clientY + scrollTop;
var left = (e.clientX + scroll().left) - box.offsetLeft;
var top = (e.clientY + scroll().top) - box.offsetTop;
// 要鼠标在mask中间
left = left - maskDiv.offsetWidth / 2;
top = top - maskDiv.offsetWidth / 2;
// 4 边界监测:mask不能超出小盒子范围
if (left < 0) {
left = 0;
}
if (left > smallDiv.offsetWidth - maskDiv.offsetWidth) {
left = smallDiv.offsetWidth - maskDiv.offsetWidth
}
if (top < 0) {
top = 0;
}
if (top > smallDiv.offsetHeight - maskDiv.offsetHeight) {
top = smallDiv.offsetHeight - maskDiv.offsetHeight
}
// 定位mask
maskDiv.style.left = left + 'px';
maskDiv.style.top = top + 'px';
// 5 鼠标在小盒子里面移动，大盒子显示大图的相应部分
// left/smallDiv.offsetWidth = bigImg左移的距离/bigImg.offsetWidth
bigImg.style.left = -left / smallDiv.offsetWidth * bigImg.offsetWidth + "px";
// top/smallDiv.offsetHeight = bigImg上移的距离/bigImg.offsetHeight
bigImg.style.top = -top / smallDiv.offsetHeight * bigImg.offsetHeight + "px";
}
</script>
</body>
</html>
Picture used:
Since you don’t have pictures, you can copy the code directly and it won’t show the effect. You can find a few pictures to replace it and modify it slightly. As long as you can understand the code, the modification will not be a problem.