ASCII码 ASCII码

放大镜效果

发布于：2022-03-05 09:49:12  栏目：技术文档
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>点击方块 移动</title>
  9.     <style type="text/css">
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         .div{
  15.             width: 400px;
  16.             height:400px;
  17.             margin: 100px;
  18.             border: 1px solid #333;
  19.             position: relative;
  20.             left: 0px;
  21.         }
  22.         .mask{
  23.             width: 200px;
  24.             height: 200px;
  25.             border:1px solid yellow;
  26.             background-color: yellow;
  27.             position: absolute;
  28.             top: 0;
  29.             opacity: 0.5;
  30.             display: none;
  31.             cursor: move;
  32.         }
  33.         .big{
  34.             width: 400px;
  35.             height:400px;
  36.             border: 1px solid #333;
  37.             position: absolute;
  38.             top: 0px;
  39.             left: 500px;
  40.             display: none;
  41.             overflow: hidden;
  42.         }
  43.         img{
  44.             width: 100%;
  45.         }
  47.     </style>
  48. </head>
  49. <body>
  51.     <div id="">
  52.         <div class="div">
  53.             <img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/132382/31/23673/311148/6220170fEd0692b77/a49312c8dbbc0445.jpg" >
  54.             <div class="mask">
  56.             </div>
  57.         </div>
  58.         <div class="big">
  59.             <img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/132382/31/23673/311148/6220170fEd0692b77/a49312c8dbbc0445.jpg" style="width: 600px; position: absolute;" >
  60.         </div>
  61.     </div>
  62.     <script type="text/javascript">
  63.         var mask = document.querySelector('.mask')
  64.         var div = document.querySelector('.div')
  65.         var big = document.querySelector('.big')
  66.         var img = big.children[0]
  68.         div.addEventListener('mouseover',function(){
  69.             mask.style.display ='block'
  70.             big.style.display = 'block'
  71.             div.addEventListener('mousemove',function(e){
  72.                 // 鼠标的坐标
  73.                 var x =e.pageX - div.offsetLeft 
  74.                 var y =e.pageY - div.offsetTop
  75.                 // 鼠标移动的距离 //遮挡层的移动距离
  76.                 var mouseMoveX = x-  mask.offsetWidth/2
  77.                 var mouseMoveY = y-  mask.offsetHeight/2
  78.                 // 盒子可以移动的距离 //遮挡层的移动最大距离
  79.                 var divMaxX = div.offsetWidth - mask.offsetWidth
  80.                 var divMaxY = div.offsetHeight - mask.offsetHeight
  81.                 // 大图片最大的移动距离
  82.                 var imgMax =  img.offsetWidth - div.offsetWidth
  83.                 console.log(imgMax)
  84.                 if(mouseMoveX <= 0 ){
  85.                     mouseMoveX =0
  86.                 }else if(mouseMoveX > divMaxX){
  87.                     mouseMoveX = divMaxX
  88.                 }
  89.                 if(mouseMoveY <= 0 ){
  90.                     mouseMoveY =0
  91.                 }else if(mouseMoveY > divMaxY){
  92.                     mouseMoveY = divMaxY
  93.                 }
  94.                 mask.style.left = mouseMoveX   + 'px'
  95.                 mask.style.top =  mouseMoveY + 'px'
  96.                 // 有个公式 移动的倍数 =  遮挡层的移动距离 * 大图片最大的移动距离 / 遮挡层的移动最大距离
  97.                 var flagX = mouseMoveX * imgMax / divMaxX
  98.                 var flagY = mouseMoveY * imgMax / divMaxY
  100.                 // var flag = img.offsetWidth/ mask.offsetWidth
  101.                 // console.log(flag)
  102.                 img.style.left = "-"+ flagX +'px'
  103.                 img.style.top = "-"+ flagY +'px'
  104.             })
  105.         })
  106.         div.addEventListener('mouseout',function(){
  107.             mask.style.display = 'none'
  108.             big.style.display = 'none'
  109.         })
  110.     </script>
  112. </body>
  113. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行