ASCII码 ASCII码

放大镜效果2 (这个有点问题)

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

© 2020 asciim码

人生就是一场修行