1.通过鼠标onmourseover监听鼠标的略过图片,改变透明小区域和放大区域的display,置为block
2.通过鼠标onmourseover监听鼠标的略过图片,改变透明小区域和放大区域的display,置为none
3.通过event对象获取鼠标的当前坐标位置,即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemove监听,不停的将透明小区域的top和left置为event.layerX,event.layer.Y的值
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
#all{
margin: 0 auto;
width: 1000px;
height: 800px;
border:1px solid blue ;
}
#small{
width: 210px;
height: 210px;
margin-top: 80px;
margin-left:100px;
border:1px solid red ;
position: relative;
float: left;
}
#small img{
width: 210px;
height: 210px;
border:1px solid gray ;
}
#shadow{
width: 100px;
height: 100px;
background-color: black;
opacity: .2;
position: absolute;
top: 0px;
left: 0px;
display: none;
cursor: move;
}
#cover{
width: 100%;
height:100%;
z-index: 10;
position: absolute;
left: 0px;
top: 0px;
cursor: move;
}
#big{
width: 310px;
height: 310px;
position: relative;
overflow: hidden;
border:1px solid yellow ;
display: none;
}
#big img{
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script>
window.onload=function(){
small=document.getElementById("small");
shadow=document.getElementById("shadow");
shadowWH=shadow.style.width?shadow.style.width:document.defaultView.getComputedStyle(shadow,null).width;
shadowWH=parseInt(shadowWH);
smallW=small.style.width?small.style.width:document.defaultView.getComputedStyle(small,null).width;
smallW=parseInt(smallW);
// smallML=small.style.marginLeft?small.style.marginLeft:document.defaultView.getComputedStyle(small,null).marginLeft;
// smallML=parseInt(smallML);
smallMT=small.style.marginTop?small.style.marginTop:document.defaultView.getComputedStyle(small,null).marginTop;
smallMT=parseInt(smallMT);
big=document.getElementById("big");
bigW=big.style.width?big.style.width:document.defaultView.getComputedStyle(big,null).width;
bigW=parseInt(bigW);
// console.log(smallW);
// console.log(shadowWH)
//console.log("smallML="+smallML);
//console.log("smallMT="+smallMT);
//console.log("bigw="+bigW);
bigImg=big.getElementsByTagName("img")[0];
move();
}
function move(){
small.onmouseover=function(){
shadow.style.display="block";
big.style.display="block";
change(event);
}
small.onmouseout=function(){
shadow.style.display="none";
big.style.display="none";
}
small.onmousemove=function(){
change(event);
}
}
function change(event){
var evt=event?event:window.event;
// var moveL=evt.pageX;
// var moveT=evt.pageY;
var moveL=evt.layerX-shadowWH/2;
var moveT=evt.layerY-shadowWH/2;
// console.log("moveL="+moveL+": moveT="+moveT);
if(moveL<0){
moveL=0;
}
if(moveL>smallW-shadowWH){
moveL=smallW-shadowWH;
}
if(moveT<0){
moveT=0;
}
if(moveT>smallW-shadowWH){
moveT=smallW-shadowWH;
}
shadow.style.left=moveL+"px";
shadow.style.top=moveT+"px";
/**
* 图片放大
*/
// big.style.left=smallW+smallML+50+"px";
big.style.left=50+"px";
big.style.top=smallMT+"px";
bigImgW=bigImg.offsetWidth;
// console.log("bigImgW="+bigImgW);
var scale=bigImgW/bigW;
bigImg.style.top=-moveT*scale+"px";
bigImg.style.left=-moveL*scale+"px";
}
</script>
<body>
<div id="all">
<div id="small">
<img src="../images/12.png"/>
<div id="shadow"></div>
<div id="cover"></div>
</div>
<div id="big">
<img src="../images/12.png"/>
</div>
</div>
</body>
</html>