JS圖片放大效果簡單實現(xiàn)代碼

更新時間：2016年09月08日 16:08:04 作者：劍出?；?

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)圖片放大效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)圖片放大效果，供大家參考，具體內(nèi)容如下

<!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=""> 
　　　　　　<!-- 鼠標(biāo)選中框 -->
　　　　　　<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獲得父節(jié)點
 　　　　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;
　　　　// 獲得鼠標(biāo)的位置
 　　　　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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: