Blogger Information
Blog 26
fans 0
comment 0
visits 21465
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
放大镜效果
default
Original
554 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>
  8. <style type="text/css">
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. .div{
  14. width: 400px;
  15. height:400px;
  16. margin: 100px;
  17. border: 1px solid #333;
  18. position: relative;
  19. left: 0px;
  20. }
  21. .mask{
  22. width: 200px;
  23. height: 200px;
  24. border:1px solid yellow;
  25. background-color: yellow;
  26. position: absolute;
  27. top: 0;
  28. opacity: 0.5;
  29. display: none;
  30. cursor: move;
  31. }
  32. .big{
  33. width: 400px;
  34. height:400px;
  35. border: 1px solid #333;
  36. position: absolute;
  37. top: 0px;
  38. left: 500px;
  39. display: none;
  40. overflow: hidden;
  41. }
  42. img{
  43. width: 100%;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div id="">
  49. <div class="div">
  50. <img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/132382/31/23673/311148/6220170fEd0692b77/a49312c8dbbc0445.jpg" >
  51. <div class="mask">
  52. </div>
  53. </div>
  54. <div class="big">
  55. <img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/132382/31/23673/311148/6220170fEd0692b77/a49312c8dbbc0445.jpg" style="width: 600px; position: absolute;" >
  56. </div>
  57. </div>
  58. <script type="text/javascript">
  59. var mask = document.querySelector('.mask')
  60. var div = document.querySelector('.div')
  61. var big = document.querySelector('.big')
  62. var img = big.children[0]
  63. div.addEventListener('mouseover',function(){
  64. mask.style.display ='block'
  65. big.style.display = 'block'
  66. div.addEventListener('mousemove',function(e){
  67. // 鼠标的坐标
  68. var x =e.pageX - div.offsetLeft
  69. var y =e.pageY - div.offsetTop
  70. // 鼠标移动的距离 //遮挡层的移动距离
  71. var mouseMoveX = x- mask.offsetWidth/2
  72. var mouseMoveY = y- mask.offsetHeight/2
  73. // 盒子可以移动的距离 //遮挡层的移动最大距离
  74. var divMaxX = div.offsetWidth - mask.offsetWidth
  75. var divMaxY = div.offsetHeight - mask.offsetHeight
  76. // 大图片最大的移动距离
  77. var imgMax = img.offsetWidth - div.offsetWidth
  78. console.log(imgMax)
  79. if(mouseMoveX <= 0 ){
  80. mouseMoveX =0
  81. }else if(mouseMoveX > divMaxX){
  82. mouseMoveX = divMaxX
  83. }
  84. if(mouseMoveY <= 0 ){
  85. mouseMoveY =0
  86. }else if(mouseMoveY > divMaxY){
  87. mouseMoveY = divMaxY
  88. }
  89. mask.style.left = mouseMoveX + 'px'
  90. mask.style.top = mouseMoveY + 'px'
  91. // 有个公式 移动的倍数 = 遮挡层的移动距离 * 大图片最大的移动距离 / 遮挡层的移动最大距离
  92. var flagX = mouseMoveX * imgMax / divMaxX
  93. var flagY = mouseMoveY * imgMax / divMaxY
  94. // var flag = img.offsetWidth/ mask.offsetWidth
  95. // console.log(flag)
  96. img.style.left = "-"+ flagX +'px'
  97. img.style.top = "-"+ flagY +'px'
  98. })
  99. })
  100. div.addEventListener('mouseout',function(){
  101. mask.style.display = 'none'
  102. big.style.display = 'none'
  103. })
  104. </script>
  105. </body>
  106. </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