怎么样实现JS图片放大效果?

怎么样实现JS图片放大效果?

本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title></title>
 <style type="text/css"> 
#div1 { 
width:300px; 
height:300px; 
position:relative; 
margin:30px auto 0px;
} 
#div1 img{
 width: 300px;
} 
#div1 span { 
width:150px; 
height:150px; 
background:red; 
position:absolute;
 left:0px;
 top:0px; 
display:none; 
opacity:0.2;
} 
.show { 
width:100%; 
height:100%;
 background:red;
 position:absolute;
 left:0px; top:0px; 
z-index:10px; 
opacity:0.1;
} 
#div2 {
 width:300px;
 height:300px; 
position:relative; 
top: -300px;
 left: 300px;
 display:none; 
overflow:hidden; 
margin:0px auto 0px;
} 
#img1 { 
position:absolute;
} 
</style> 
</head>
<body>
 <div id="div1"> 
<!-- 图片 -->
<img src="images/xiangqing.png" alt=""> 
<!-- 鼠标选中框 -->
<span></span> 
<!-- 背景 -->
<div class="show"></div>
 </div> 
<div id="div2"> 
<!-- 放大后的图片 -->
<img id="img1" src="images/xiangqingda.png" /> 
</div> 
</body>
 <script>

 
// 加载完成后显示
window.onload=function () { 
var oDiv=document.getElementById('div1'); 
var oShow=document.getElementsByClassName('show')[0]; 
var oSpan=document.getElementsByTagName('span')[0]; 
var oImg=document.getElementById('img1');
 // parentNode获得父节点
 oShow.onmouseover=function() { 
oSpan.style.display='block'; 
oImg.parentNode.style.display='block'; 
}; 
oShow.onmouseout=function() { 
oSpan.style.display=''; 
oImg.parentNode.style.display=''; 
}; 
// 放大器移动
 oShow.onmousemove=function(ev) { 
// 解决浏览器兼容问题
 var oEvent=ev||event;
// 获得鼠标的位置
 var x=oEvent.offsetX-oSpan.offsetWidth/2; 
var y=oEvent.offsetY-oSpan.offsetHeight/2;

// console.log(oEvent.clientY);
// console.log(oDiv.offsetTop);
// console.log(oSpan.offsetHeight/2);
// console.log(oEvent.clientY);
 
if(x<0) { 
x=0; 
} else if(x>oShow.offsetWidth-oSpan.offsetWidth) { 
x=oShow.offsetWidth-oSpan.offsetWidth; 
} if(y<0) { 
y=0; 
} else if(y>oShow.offsetHeight-oSpan.offsetHeight) { 
y=oShow.offsetHeight-oSpan.offsetHeight;
} 
// 给选中框定位
 oSpan.style.left=x+'px'; 
oSpan.style.top=y+'px'; 
// 给放大器定位
 var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); 
var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); 
var oImgparent=oImg.parentNode; 
oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; 
oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; 
}; 
};


</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。