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

来源：懂视网责编：小采时间：2020-11-27 20:58:05

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

JavaScript图片放大镜效果代码[代码比较简单]_图象特效: #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(

推荐度：

点击下载本文 文档为doc格式

导读JavaScript图片放大镜效果代码[代码比较简单]_图象特效: #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(

<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 图片放大代码</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.onmouseover=function() 
{ 
oSpan.style.display='block'; 
oImg.parentNode.style.display='block'; 
}; 
oShow.onmouseout=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> 
<body> 
 
<img src="http://files.jb51.net/demoimg/201102/11_2_2.jpg" /> 
 
 
 
 
<img id="img1" src="http://files.jb51.net/demoimg/201102/11_2_2.jpg" /> 
 
</body> 
</html>

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

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

推荐度：

点击下载本文 文档为doc格式

标签：图片代码源代码

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐