Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 放大镜效果
Blogger Information
Blog 26
fans 0
comment 0
visits 21512
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
放大镜效果
default
Original
557 people have browsed it
  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>
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