效果在这里!!~
放大镜.gif
CSS样式
<style type="text/css">
.min{
width: 350px;
height: 300px;
border: 1px solid black;
text-align: center;
float: left;
position: relative;
}
.max{
width: 350px;
height: 300px;
border: 1px solid red;
float: left;
display: none;
overflow: hidden;
position: relative;
}
.max img{
position: absolute;
}
.fd{
width: 150px;
height: 150px;
background-color:white;
opacity: 0.25;
box-shadow: 0 0 10px;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
HTML 布局
<body>
<div class="min">
<img src="img/min.jpg"/>
<div class="fd"></div>
</div>
<div class="max">
<img src="img/max.jpg"/>
</div>
</body>
js部分~
<script type="text/javascript">
var min=document.querySelector(".min");
var max=document.querySelector(".max");
var fd=document.querySelector(".fd");
var img=document.querySelector(".max img");
min.onmouseover=function(){
//1.鼠标覆盖 显示max 和fd
max.style.display="block";
fd.style.display="block";
//离开时隐藏
min.onmouseout=function(){
max.style.display="none";
fd.style.display="none";
}
//2.fd的移动范围
min.onmousemove=function(){
//鼠标触摸的点event.clientX 鼠标距离window边界的距离
var x=event.clientX-min.offsetLeft-fd.offsetWidth/2;
var y=event.clientY-min.offsetTop-fd.offsetHeight/2;
//最大移动距离
var maxX=min.clientWidth-fd.offsetWidth;
var maxY=min.clientHeight-fd.offsetHeight;
//边界判断
if(x<=0){
x=0;
}else if(x>=maxX){
x=maxX;
}
if(y<=0){
y=0;
}else if(y >= maxY){
y = maxY;
}
//fd的位置
fd.style.left=x+"px";
fd.style.top=y+"px";
//fd/min=max/img
//放大镜/小框=大框/大图
//例如 比例计算 500 / 800 = fd / 500
//移动比例
var yidongX=x/maxX;
var yidongY=y/maxY
//移动
//3.max的对应显示 把小图的比例乘以差值 得到大图的Left和top
img.style.left=yidongX*(max.clientWidth-img.offsetWidth)+"px";
img.style.top=yidongY*(max.clientHeight-img.offsetHeight)+"px";
}
}
</script>
转载请注明出处喔~
网友评论