JS中放大镜
程序员文章站
2022-06-01 17:07:46
...
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>辣么帅的我</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#bobo{
width: 350px ;
height: 350px;
position: relative;
margin: 100px;
border:1px solid #777777 ;
}
#small{
position: relative;
}
#mm{
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
#big{
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<div id="bobo">
<div id="small">
<img src="Img/xiao.jpg" style="width: 350px;" id="x"/>
<div id="mm"></div>
</div>
<div id="big">
<img src="Img/da.jpg" style="width: 800px;" id="d"/>
</div>
</div>
<script src="../com.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var bobo=myObj.getId("bobo");
var sm=myObj.getId("small");
var sm_im=myObj.getId("x");
var sm_mm=myObj.getId("mm");
var bg=myObj.getId("big");
var bg_im=myObj.getId("d");
bobo.οnmοuseοver=function(){
sm_mm.style.display="block";
bg.style.display="block";
};
bobo.οnmοuseοut=function(){
sm_mm.style.display="none";
bg.style.display="none";
};
sm.οnmοusemοve=function(e){
// 100是盒子的marfin值
var sm_mm_x=myObj.getEvent(e).clientX-sm_mm.offsetWidth/2-100;
var sm_mm_y=myObj.getEvent(e).clientY-sm_mm.offsetHeight/2-100;
//175=sm.offsetwidth-sm_mm.offsewidth
sm_mm_x=sm_mm_x<0?0:sm_mm_x;//x轴的最小值
sm_mm_y=sm_mm_y<0?0:sm_mm_y;//Y轴的最小值
sm_mm_x=sm_mm_x>175?175:sm_mm_x;//x轴的最大值
sm_mm_y=sm_mm_y>175?175:sm_mm_y;//y轴的最大值
//将坐标赋值给遮挡层
sm_mm.style.left=sm_mm_x+"px";
sm_mm.style.top=sm_mm_y+"px";
//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
// 400=大图的最大移动距离=bg_im.offsetWidth-bg.offsetWidth;
var bg_im_xproportion=sm_mm_x*400/175;
var bg_im_yproportion=sm_mm_y*400/175;
//将坐标赋值给大图
bg_im.style.marginLeft=-bg_im_xproportion+"px";
bg_im.style.marginTop=-bg_im_yproportion+"px";
};
</script>
</body>
</html>
坚持每周更新，向全栈大佬进发
这是我的公众号，喜欢的朋友可以关注一下，每周更新，篇篇干货
上一篇： flash怎么使用绘图工具?