首页 > 代码库 > js放大镜

js放大镜

2024-09-11 12:20:10   220人阅读

  <!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="http://www.mamicode.com/img/1.jpg" /><!--小图片-->
  </div>
  <div id="big-box">
  <img src="http://www.mamicode.com/img/1.jpg" style="width:1000px;height:1000px"/><!--大图片-->
  </div>
  </div>
  </body>
  </html>
   

js放大镜


联系
我们