放大镜实例

Bertha 。 2022-10-27 05:27 249阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>放大镜案例</title>
  6.         <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 430px; height: 430px; border: 1px solid #DDDDDD; position: relative; margin: 50px; } #small_box{ width: 430px; height: 430px; position: relative; } #small_box #mask{ position: absolute; width: 210px; height: 210px; background: url(images/zzc.png) repeat; top: 0; left: 0; display: none; } #big_box{ position: absolute; left: 440px; top: 0; width: 430px; height: 430px; border: 1px solid #ddd; overflow: hidden; display: none; } #big_box img{ position: absolute; z-index: 5; } </style>
  7.     </head>
  8.     <body>
  9.            <div id="box">
  10.                 <div id="small_box" >
  11.                        <img src="images/shuijiao.jpg" >
  12.                         <span id="mask">
  14.                         </span>
  15.                 </div>
  16.                 <div id="big_box">
  17.                     <img src="images/shuijiao.jpg" >
  18.                 </div>
  19.            </div>
  20.            <script type="text/javascript"> window.onload=function(){ //1.获取需要的标签 var box=document.getElementById("box"); var small_box=box.children[0]; var big_box=box.children[1]; var small_img=small_box.children[0]; var mask=small_box.children[1]; var big_img=big_box.children[0]; //2. 监听鼠标移入 small_box.onmouseover=function(){ //2.1让遮罩层和大盒子显示出来 mask.style.display="block"; big_box.style.display="block"; small_box.onmousemove=function(e){ e=e||window.event; //2.3 求出小盒子移动的水平和垂直的距离 var moveX=e.clientX-small_box.offsetLeft-box.offsetLeft-mask.offsetWidth*0.5; var moveY=e.clientY-small_box.offsetTop-box.offsetTop-mask.offsetHeight*0.5; // 2.4边界处理 if(moveX<0){ moveX=0; }else if(moveX>=small_box.offsetWidth-mask.offsetWidth){ moveX=small_box.offsetWidth-mask.offsetWidth; } if(moveY<0){ moveY=0; }else if(moveY>=small_box.offsetHeight-mask.offsetHeight){ moveY=small_box.offsetHeight-mask.offsetHeight; } //让小盒子移动起来 //公式： moveX/大图移动的距离？？？=（small_box宽度-mask宽度）/（big_img 宽度-big_small宽度） mask.style.left=moveX+'px'; mask.style.top=moveY+'px'; var x=moveX/(small_box.offsetWidth-mask.offsetWidth); var y=moveY/(small_box.offsetHeight-mask.offsetHeight); big_img.style.left=-x*(big_img.offsetWidth-big_box.offsetWidth)+"px"; big_img.style.top=-y*(big_img.offsetHeight-big_box.offsetHeight)+"px"; } small_box.onmouseout=function(){ mask.style.display='none'; big_box.style.display='none'; } } } </script>
  21.     </body>
  22. </html>

效果：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JS 图片放大镜

      需求：             1.小遮罩可以随鼠标在小盒子上移动             2.遮罩层有自己的移动范围             3.鼠标在遮罩层的

    小灰灰小灰灰/ 0 赞/ 297 阅读

    相关 网站的放大镜实例

    本文介绍一下电商网站用的比较多的案例,放大镜案例,先来看看效果吧. ![放大镜实例][70] 需求分析: 当鼠标移入进小盒子的时候即左边的盒子,显示

    亦凉亦凉/ 0 赞/ 218 阅读

    相关 vue放大镜

    最近有一个需求是要像淘宝商品详情页那样，分享一下。小白第一次分享，各位大神莫见笑。 Build Setup 使用步骤 安装 install npm i

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 386 阅读