放大镜效果图
代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .min_img{ /*1920 x 1080*/ width: 480px; height: 270px; background-image: url(img/large.jpg); background-size: 100%; position: relative; } .fdj{ width: 140px; height: 100px; background: #ccc; opacity: 0.4; position: absolute; display: none; } .max_img{ /*1920 x 1080*/ width: 480px; height: 270px; overflow: hidden; border: 1px solid red; display: none; } </style> </head> <body> <div class="min_img"> <div class="fdj"></div> </div> <div class="max_img"> <img src="img/large.jpg"/> </div> </body> <script type="text/javascript"> var ofdj=document.getElementsByClassName('fdj')[0]; var omin_img=document.getElementsByClassName('min_img')[0]; var omax_img=document.getElementsByClassName('max_img')[0]; document.onmousemove=function(e){ var e=e||window.event; l=e.clientX-ofdj.offsetWidth/2; t=e.clientY-ofdj.offsetHeight/2; if(l<0){ l=0; } if(t<0){ t=0; } if(l>omin_img.offsetWidth-ofdj.offsetWidth){ l=omin_img.offsetWidth-ofdj.offsetWidth; } if(t>omin_img.offsetHeight-ofdj.offsetHeight){ t=omin_img.offsetHeight-ofdj.offsetHeight; } ofdj.style.left=l+'px'; ofdj.style.top=t+'px'; omax_img.scrollLeft=l*4; omax_img.scrollTop=t*4; } omin_img.onmouseover=function(){ ofdj.style.display='block'; omax_img.style.display='block' } omin_img.onmouseout=function(){ ofdj.style.display='none'; omax_img.style.display='none'; } </script> </html>