<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 350px;
height: 350px;
border: 1px solid #000;
margin: 200px;
position: relative;
}
#big{
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
top:0;
left : 360px;
display: none;
}
#mask{
width: 175px;
height: 175px;
background: paleturquoise;
position: absolute;
left:0;
top: 0;
opacity: 0.3;
display: none;
cursor: move;
}
#small{
position: relative;
}
#bigImg{
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div id="box" >
<div id="small"><!--小图区-->
<img src="images/001.jpg" alt="" />
<div id="mask"></div><!--遮罩层-->
</div>
<div id="big"><!--大图区-->
<img src="images/0001.jpg" alt="" id="bigImg"/>
</div>
</div>
</body>
</html>
<script src="public.js"> </script>
<script type="text/javascript">
$id("box").onmouseover=function(){
$id("mask").style.display="block";
$id("big").style.display="block";
}
$id("box").onmouseout=function(){
$id("mask").style.display="none";
$id("big").style.display="none";
}
$id("box").onmousemove=function(e){
var e=e||event;
var l=e.pageX-$id("box").offsetLeft-$id("mask").offsetWidth/2;
var t=e.pageY-$id("box").offsetTop-$id("mask").offsetHeight/2;
var left=$id("small").offsetWidth-$id("mask").offsetWidth;
var top=$id("small").offsetHeight-$id("mask").offsetHeight;
l=l<0?0:(l>left?left:l);
t=t<0?0:(t>top?top:t);
$id("mask").style.left=l+"px";
$id("mask").style.top=t+"px";
var bigImgl=l*$id("bigImg").offsetWidth/$id("small").offsetWidth;
var bigImgt=l*$id("bigImg").offsetHight/$id("small").offsetHeight;
$id("bigImg").style.left=-bigImgl+"px";
$id("bigImg").style.top=-bigImgt+"px";
}
</script>
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
