js的小效果-图片放大镜效果

最新推荐文章于 2021-07-31 14:00:40 发布

转载最新推荐文章于 2021-07-31 14:00:40 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HUANGRONG888/p/6055760.html

本文介绍了一种网页中常见的图片放大镜效果的实现方法。通过HTML、CSS和JavaScript结合使用，实现了鼠标悬停时显示放大的局部图片的功能，并随着鼠标的移动而改变放大区域。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding:0;}
#small{
width:350px;
height:350px;
border:1px solid #000;
position:relative;
float: left;
margin-right: 20px;

}
#big img{
position: absolute;
}
#mask{
display: block;
width:50px;
height:50px;
opacity:0.5;
background: red;
display: none;
position: absolute;
left:0;
top:0;
}
#big{
width:350px;
height:350px;
float:left;
border:1px solid #000;
overflow: hidden;
display: none;
position: relative;
}
</style>
<script>
window.onload=function(){
var oSmall=document.getElementById('small');
var oMask=document.getElementById('mask');
var oBig=document.getElementById('big');
var oImg=document.getElementById('bigimg');
oSmall.onmouseover=function(){
oMask.style.display='block';
oBig.style.display='block';
};
oSmall.onmouseout=function(){
oMask.style.display='none';
oBig.style.display='none';
};
oSmall.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - oMask.offsetWidth/2;
var t = oEvent.clientY - oMask.offsetHeight/2;
if(l < 0){
l= 0;
}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
l = oSmall.offsetWidth - oMask.offsetWidth;
}
if(t < 0){
t = 0;
}else if(t >oSmall.offsetHeight - oMask.offsetHeight){
t = oSmall.offsetHeight - oMask.offsetHeight;
}
oMask.style.left = l + 'px';
oMask.style.top = t + 'px';
oImg.style.left=l*(oBig.offsetWidth-oImg.offsetWidth)/
(oSmall.offsetWidth-oMask.offsetWidth)+'px';
oImg.style.top=t*(oBig.offsetHeight-oImg.offsetHeight)/
(oSmall.offsetHeight-oMask.offsetHeight)+'px';

}
oSmall.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-oMask.offsetWidth/2;
var t=oEvent.clientY-oMask.offsetHeight/2;
if(l<0){
l=0;
}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
l=oSmall.offsetWidth-oMask.offsetWidth;
}
if(t<0){
t=0;
}else if(t>oSmall.offsetHeight-oMask.offsetHeight){
t=oSmall.offsetHeight-oMask.offsetHeight;
}
oMask.style.left=l+'px';
oMask.style.top=t+'px';
oImg.style.left=l*(oBig.offsetWidth-oImg.offsetWidth)/
(oSmall.offsetWidth-oMask.offsetWidth)+'px';
oImg.style.top=t*(oBig.offsetHeight-oImg.offsetHeight)/
(oSmall.offsetHeight-oMask.offsetHeight)+'px';
}
}
</script>
</head>
<body>
<div id="small">
<img src="img/s.jpg" alt=""/>
<span id="mask"></span>
</div>
<div id="big">
<img src="img/b.jpg" alt="" id="bigimg"/>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/HUANGRONG888/p/6055760.html