js-鼠标事件-放大镜效果
事前准备
两张长宽比1：2的图
css部分
1.外部一个大盒子
2.里面有两个等宽高的小盒子（小盒子宽高跟小图片一样大） 分别装两个图片，且分别浮动在左右两侧
3.给装大图片的小盒子一个overflow：hidden，且给大图片定位在小盒子的左上角，为什么要定位，后面会讲到。
4.再向装小图片的小盒子中定位一个b标记（代表放大镜的位置）暂时定位到左上角
<style>
*{
margin:0;padding: 0}
#box{
width:1200px;
height: 700px;
border:1px solid #ccc;
margin:150px;
}
#min{
float:left;
width:400px;
height: 400px;
position: relative;
}
b{
position: absolute;
left:0;
top:0;
width:200px;
height: 200px;
background: blue;
opacity: 0.5;
display: none;
}
#max{
float:right;
width:400px;
height: 400px;
overflow: hidden;
display: none;
position: relative;
}
#imgs{
position: absolute;
left:0;
top:0;
}
</style>
html部分
<body>
<div id="box">
<div id="min"><img src="imgs/min.jpg" alt=""><b></b></div>
<div id="max"><img src="imgs/max.jpg" alt="" id="i
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
