Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 放大镜效果2 (这个有点问题)
Blogger Information
Blog 26
fans 0
comment 0
visits 21625
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
放大镜效果2 (这个有点问题)
default
Original
448 people have browsed it
  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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post