JavaScript图片放大镜效果代码[代码比较简单]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} 
#div1 img{width:304px; height:222px;} 
#div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;} 
.show { width:100%; height:100%; background:red; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; } 
#div2 {width:304px; height:222px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;} 
#img1 { position:absolute;} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript <a href="/tag/tupian/" target="_blank" class="keywords">图片</a>放大<a href="/tag/daima/" target="_blank" class="keywords">代码</a></title> 
<script type="text/javascript"> 
window.onload=function () 
{ 
var oDiv=document.getElementById('div1'); 
var oShow=oDiv.getElementsByTagName('div')[0]; 
var oSpan=oDiv.getElementsByTagName('span')[0]; 
var oImg=document.getElementById('img1'); 
oShow.onmou<a href="/tag/SEO/" title="SEO">SEO</a>ver=function() 
{ 
oSpan.style.display='block'; 
oImg.parentNode.style.display='block'; 
}; 
oShow.onmou<a href="/tag/SEO/" title="SEO">SEO</a>ut=function() 
{ 
oSpan.style.display='none'; 
oImg.parentNode.style.display='none'; 
}; 
oShow.onmousemove=function(ev) 
{ 
var oEvent=ev||event; 
var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2; 
var y=oEvent.clientY-oDiv.offsetTop-oSpan.offsetHeight/2;

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> 
</head> 
@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_15@ 
<div id="div1"> 
<p class="pic_center"><img src="http://www.oudahe.com/uploads/201805/16/15264627281.jpg" /></p> 
<span>@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_21@ 
<div class="show"></div> 
</div> 
<div id="div2"> 
<p class="pic_center"><img id="img1" src="http://www.oudahe.com/uploads/201805/16/15264627281.jpg" /></p> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

403

@H_404_21@

JavaScript图片放大镜效果代码[代码比较简单]

您可能感兴趣的文章:

猜你在找的JavaScript相关文章