放大镜

it2022-05-07  0

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>放大镜</title>  <style type="text/css">   #xiao{    width:430px;    height:419px;    /*border:red 1px solid;*/    margin:100px 0 0 100px;    position:relative;   }   #xiao img{    width:100%;    height:100%;    /*垂直对齐  中间*/    vertical-align:middle;   }   #jing{    width:86px;    height:82px;    background: #00FFFF;    opacity:0.4;    position:absolute;    top:0;    left:0;    /*display: none;*/   }   #da{    width:430px;    height:419px;    /*溢出:隐藏;*/    overflow:hidden;    margin:-419px 0 0 600px;    position:relative;    /*display: none;*/   }   #da img{    width:2150px;    height:2095px;    position:absolute;   }  </style> </head> <body>  <div id="xiao">   <!--3120   4160-->   <!--430    419-->   <img src="../../../js/11.9/img/糖糖.jpg"/>   <div id="jing"></div>  </div>  <div id="da">   <!--<img src="jsk的/images/didi.jpg"/ id="pic">-->   <img src="../../../js/11.9/img/糖糖.jpg"/ id="pic">  </div> </body></html><script type="text/javascript">  var jing=document.getElementById("jing");//放大镜 var pic=document.getElementById("pic");//放大的图片 var xiao=document.getElementById("xiao")//小的图片 jing.οnmοusedοwn=function(ev){  var ev=ev||window.event;  ev.cancelBubble=true;  var that=this;  var x=ev.clientX-this.offsetLeft;  var y=ev.clientY-this.offsetTop;  document.οnmοusemοve=function(ev){   var ev=ev||window.event;   var l=ev.clientX-x;   var ll=xiao.offsetWidth-that.offsetWidth;   var t=ev.clientY-y;   var tt=xiao.offsetHeight-that.offsetHeight;   if(l<=0){    l=0;   }   else if(l>=ll){    l=ll;   }   if(t<=0){    t=0;   }   else if(t>=tt){    t=tt;   }   that.style.left=l+"px";   that.style.top=t+"px";      pic.style.left=-5*parseInt(that.style.left)+"px";   pic.style.top=-5*parseInt(that.style.top)+"px";  }  document.οnmοuseup=function(){   document.οnmοusemοve=null;   document.οnmοuseup=null;  }  return false; }</script>

 

 

 

转载于:https://www.cnblogs.com/liancai001/p/10156635.html

相关资源:Android放大镜实现

最新回复(0)