<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
#xiao{
430px;
height:419px;
/*border:red 1px solid;*/
margin:100px 0 0 100px;
position:relative;
}
#xiao img{
100%;
height:100%;
/*垂直对齐 中间*/
vertical-align:middle;
}
#jing{
86px;
height:82px;
background: #00FFFF;
opacity:0.4;
position:absolute;
top:0;
left:0;
/*display: none;*/
}
#da{
430px;
height:419px;
/*溢出:隐藏;*/
overflow:hidden;
margin:-419px 0 0 600px;
position:relative;
/*display: none;*/
}
#da img{
2150px;
height:2095px;
position:absolute;
}
</style>
</head>
<body>
<div id="xiao">
<!--3120 4160-->
<!--430 419-->
<img src="../../../js/11.9/img/糖糖.jpg"/>
<div id="jing"></div>
</div>
<div id="da">
<!--<img src="jsk的/images/didi.jpg"/ id="pic">-->
<img src="../../../js/11.9/img/糖糖.jpg"/ id="pic">
</div>
</body>
</html>
<script type="text/javascript">
var jing=document.getElementById("jing");//放大镜
var pic=document.getElementById("pic");//放大的图片
var xiao=document.getElementById("xiao")//小的图片
jing.onmousedown=function(ev){
var ev=ev||window.event;
ev.cancelBubble=true;
var that=this;
var x=ev.clientX-this.offsetLeft;
var y=ev.clientY-this.offsetTop;
document.onmousemove=function(ev){
var ev=ev||window.event;
var l=ev.clientX-x;
var ll=xiao.offsetWidth-that.offsetWidth;
var t=ev.clientY-y;
var tt=xiao.offsetHeight-that.offsetHeight;
if(l<=0){
l=0;
}
else if(l>=ll){
l=ll;
}
if(t<=0){
t=0;
}
else if(t>=tt){
t=tt;
}
that.style.left=l+"px";
that.style.top=t+"px";
pic.style.left=-5*parseInt(that.style.left)+"px";
pic.style.top=-5*parseInt(that.style.top)+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
</script>
