放大镜例子
下面是一个放大镜例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #small{ width: 300px; height: 300px; position: relative; float:left; margin-right: 10px; } #small img{ width: 300px; } #small div{ width: 100px; height: 100px; background: green; opacity: 0.6; position: absolute; left: 0; top: 0; cursor: move; } #big{ width: 500px; height:500px; float:left; overflow: hidden; position: relative; } #big img{ position: absolute; left: 0; top:0; } </style> <script> window.onload=function(){ var small=document.getElementById('small'); var div=document.querySelector('#small div'); var big=document.getElementById('big'); var bigimg=document.querySelector('#big img'); div.style.display='none'; big.style.display='none'; small.onmouseover=function(){ div.style.display='block'; big.style.display='block'; } small.onmouseout=function(){ div.style.display='none'; big.style.display='none'; } document.onmousemove=function(ev){ var l=ev.clientX-div.offsetWidth/2-small.offsetLeft; var t=ev.clientY-div.offsetHeight/2-small.offsetTop; if(l<0){ l=0; }else if(l>small.offsetWidth-div.offsetWidth){ l=small.offsetWidth-div.offsetWidth; } if(t<0){ t=0; }else if(t>small.offsetHeight-div.offsetHeight){ t=small.offsetHeight-div.offsetHeight; } div.style.left=l+'px'; div.style.top=t+'px'; var scaleX=l/(small.offsetWidth-div.offsetWidth); var scaleY=t/(small.offsetHeight-div.offsetHeight); bigimg.style.left=-scaleX*(bigimg.offsetWidth-big.offsetWidth)+'px'; bigimg.style.top=-scaleY*(bigimg.offsetHeight-big.offsetHeight)+'px'; } } </script> </head> <body> <div id="small"> <img src="images/big.jpg"/> <div></div> </div> <div id="big"> <img src="images/big.jpg"/> </div> </body> </html>
放弃不难,但坚持一定很酷!