js 放大镜
程序员文章站
2022-03-11 18:13:16
...
放大镜
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.min_img{
/*1920 x 1080*/
width: 480px;
height: 270px;
background-image: url(img/large.jpg);
background-size: 100%;
position: relative;
}
.fdj{
width: 140px;
height: 100px;
background: #ccc;
opacity: 0.4;
position: absolute;
display: none;
}
.max_img{
/*1920 x 1080*/
width: 480px;
height: 270px;
overflow: hidden;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div class="min_img">
<div class="fdj"></div>
</div>
<div class="max_img">
<img src="img/large.jpg"/>
</div>
</body>
<script type="text/javascript">
var ofdj=document.getElementsByClassName('fdj')[0];
var omin_img=document.getElementsByClassName('min_img')[0];
var omax_img=document.getElementsByClassName('max_img')[0];
document.onmousemove=function(e){
var e=e||window.event;
l=e.clientX-ofdj.offsetWidth/2;
t=e.clientY-ofdj.offsetHeight/2;
if(l<0){
l=0;
}
if(t<0){
t=0;
}
if(l>omin_img.offsetWidth-ofdj.offsetWidth){
l=omin_img.offsetWidth-ofdj.offsetWidth;
}
if(t>omin_img.offsetHeight-ofdj.offsetHeight){
t=omin_img.offsetHeight-ofdj.offsetHeight;
}
ofdj.style.left=l+'px';
ofdj.style.top=t+'px';
omax_img.scrollLeft=l*4;
omax_img.scrollTop=t*4;
}
omin_img.onmouseover=function(){
ofdj.style.display='block';
omax_img.style.display='block'
}
omin_img.onmouseout=function(){
ofdj.style.display='none';
omax_img.style.display='none';
}
</script>
</html>
效果图
上一篇： 创建并运行自己的第一个Flutter项目
下一篇： 【精选】Flutter之试学经验整理