前端放大镜效果
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<style type="text/css"> | |
#out{ | |
width: 1000px; | |
overflow: hidden; | |
} | |
#outer{ | |
width: 350px; | |
height: 350px; | |
border: 1px solid red; | |
float: left; | |
position: relative; | |
margin: 0 10px; | |
} | |
#outer img{ | |
width:350px; | |
height:350px; | |
position: absolute; | |
} | |
#outer p{ | |
width: 175px; | |
height: 175px; | |
background: #008884; | |
margin: 0 auto; | |
position: absolute; | |
opacity:0.5; | |
filter:alpha(opacity=50); | |
} | |
#inner2{ | |
width: 400px; | |
height: 400px; | |
border: 1px solid red; | |
float: left; | |
position: relative; | |
overflow: hidden; | |
display: none; | |
} | |
#inner2 img{ | |
width: 800px; | |
height: 800px; | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="out"> | |
<div id="outer"> | |
<img src="images1/q8.jpg" id="minimg"> | |
<p id="mask"></p> | |
</div> | |
<div id="inner2"> | |
<img src="images1/q8.jpg" id="maximg"> | |
</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
var outer=document.getElementById("outer"); | |
var inner2=document.getElementById("inner2"); | |
var minimg=document.getElementById("minimg"); | |
var maximg=document.getElementById("maximg"); | |
var mask=document.getElementById("mask"); | |
outer.onmousemove=function(ev){ | |
var eve=ev||window.event; | |
mask.style.display="block"; | |
inner2.style.display="block"; | |
var maskLeft=eve.clientX-outer.offsetLeft-mask.offsetWidth/2; | |
var maskTop=eve.clientY-outer.offsetTop-mask.offsetHeight/2; | |
var maxLeft=outer.clientWidth-mask.offsetWidth; | |
var maxTop=outer.clientHeight-mask.offsetHeight; | |
if (maskLeft>=maxLeft){ | |
maskLeft=maxLeft; | |
}else if(maskLeft<=0){ | |
maskLeft=0; | |
} | |
if(maskTop>=maxTop){ | |
maskTop=maxTop; | |
}else if(maskTop<=0){ | |
maskTop=0; | |
} | |
mask.style.left=maskLeft+"px"; | |
mask.style.top=maskTop+"px"; | |
var scale=maximg.clientWidth/minimg.clientWidth; | |
maximg.style.left=-maskLeft*scale+"px"; | |
maximg.style.top=-maskTop*scale+"px"; | |
} | |
outer.onmouseout=function(){ | |
mask.style.display="none"; | |
inner2.style.display="none"; | |
} | |
</script> | |
</html> |