| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| *{ | |
| margin:0px; | |
| padding:0px; | |
| border:0px; | |
| } | |
| #demo{ | |
| width:800px; | |
| height:800px; | |
| border:1px solid red; | |
| position:relative; | |
| display: block; | |
| margin: 50px; | |
| } | |
| #small-box{ | |
| width:230px; | |
| height:230px; | |
| position:relative; | |
| z-index:1111; | |
| } | |
| #float-box{ | |
| display: none; | |
| width:160px; | |
| height:120px; | |
| position:absolute; | |
| top:0px; | |
| left:0px; | |
| background: #ffffcc; | |
| border:1px solid red; | |
| opacity: 0.5; | |
| filter:alpha(opcity=50); | |
| cursor:move; | |
| } | |
| #big-box{ | |
| display: none; | |
| position:absolute; | |
| top:100px; | |
| left:300px; | |
| width:487px; | |
| height:365px; | |
| border:1px solid green; | |
| overflow: hidden; | |
| z-index:1; | |
| } | |
| #big-box img{ | |
| position:absolute; | |
| z-index: 5; | |
| top:0px; | |
| left:0px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| window.onload=function(){ | |
| var objdemo=document.getElementById("demo"); | |
| var objsmallbox=document.getElementById("small-box"); | |
| var objfloatbox=document.getElementById("float-box"); | |
| var objbigbox=document.getElementById("big-box"); | |
| var objbigboximg=objbigbox.getElementsByTagName("img")[0]; | |
| objsmallbox.onmouseover=function(e){ | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| objfloatbox.style.display="block"; | |
| objbigbox.style.display="block"; | |
| } | |
| objsmallbox.onmouseout=function(e){ | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| objfloatbox.style.display="none"; | |
| objbigbox.style.display="none"; | |
| } | |
| objsmallbox.onmousemove=function(e){ | |
| var _ev=e; | |
| var left=_ev.clientX-objdemo.offsetLeft-objsmallbox.offsetLeft-objfloatbox.offsetWidth/2 ; | |
| var top=_ev.clientY-objdemo.offsetTop-objsmallbox.offsetTop-objfloatbox.offsetHeight/2; | |
| if(left<0){ | |
| left=0; | |
| }else if(left>(objsmallbox.offsetWidth-objfloatbox.offsetWidth)){ | |
| left=objsmallbox.offsetWidth-objfloatbox.offsetWidth; | |
| } | |
| if(top<0){ | |
| top=0; | |
| }else if(top>(objsmallbox.offsetHeight-objfloatbox.offsetHeight)){ | |
| top=objsmallbox.offsetHeight-objfloatbox.offsetHeight; | |
| } | |
| // console.log(objsmallbox.offsetHeight); | |
| // console.log(objfloatbox.offsetHeight); | |
| objfloatbox.style.left=left+"px"; | |
| objfloatbox.style.top=top+"px"; | |
| var parcentX=left/(objsmallbox.offsetWidth-objfloatbox.offsetWidth); | |
| var parcentY=top/(objsmallbox.offsetHeight-objfloatbox.offsetHeight); | |
| console.log(parcentX) | |
| console.log(parcentY) | |
| console.log(objbigboximg.offsetWidth) | |
| console.log(objbigboximg.offsetHeight) | |
| objbigboximg.style.left=-parcentX*(objbigboximg.offsetWidth-objbigbox.offsetWidth)+"px"; | |
| objbigboximg.style.top=-parcentY*(objbigboximg.offsetHeight-objbigbox.offsetHeight)+"px"; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!--放大镜的原理：大图片移动的位置==放大镜图片移动的偏移量--> | |
| <div id="demo"> | |
| <div id="small-box"> | |
| <div id="float-box"></div><!--放大镜盒子--> | |
| <img src="img/1.jpg" /><!--小图片--> | |
| </div> | |
| <div id="big-box"> | |
| <img src="img/1.jpg" style="width:1000px;height:1000px"/><!--大图片--> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
时间： 2024-10-11 03:13:22