| <!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> |
原文：http://www.cnblogs.com/wjcnmq/p/6255757.html