用JavaScript中jQuery编写放大镜效果
Posted YKmaster
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JavaScript中jQuery编写放大镜效果相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 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>Document</title> 9 <style> 10 #big { 11 width: 400px; 12 height: 400px; 13 border: 1px solid black; 14 overflow: hidden; 15 display: none; 16 position: absolute; 17 background-color: white; 18 background-image: url(‘./image/1.bmp‘); 19 opacity: 0.8; 20 } 21 22 #small { 23 width: 350px; 24 height: 350px; 25 border: 1px solid black; 26 background-image: url(‘./image/11.bmp‘); 27 } 28 29 #img { 30 width: 800px; 31 height: 800px; 32 } 33 34 #div { 35 width: 175px; 36 height: 175px; 37 background-color: blue; 38 opacity: 0.5; 39 position: absolute; 40 display: none; 41 } 42 </style> 43 </head> 44 45 <body> 46 47 <div id="small"> 48 <div id="div"></div> 49 <!-- <img src="./image/11.bmp" /> --> 50 </div> 51 <div id="img"> 52 <div id="big"> 53 <!-- <img src="./image/1.bmp" /> --> 54 </div> 55 </div> 56 <script src="./jquery-1.12.4.min.js"></script> 57 <script> 58 //当鼠标在图片上移动时的操作 59 $(window).on(‘load‘, function () { 60 $("#small").on(‘mouseenter‘, function () { 61 let position = $(this).position();//获取small偏移 62 $("#big").css({//大的图片距离小的图片的距离 63 top: position.top, 64 left: position.left + $(this).width() + 80 65 }).show(); 66 }) 67 68 $("#small").on(‘mousemove‘, function (e) {//鼠标在图片上移动 69 let left1 =e.pageX-$(this).offset().left; 70 let top1=e.pageY-$(this).offset().top; 71 left1=left1-80<0?90:left1; 72 top1=top1-80<0?90:top1; 73 left1=left1-80>175?263:left1; 74 top1=top1-80>175?263:top1; 75 $(‘#div‘).css({//小方块显示 76 display: "block", 77 left:left1-80, 78 top:top1 -80 79 }) 80 81 let position = $(this).position(); 82 //第一种 83 //计算鼠标在图片上面的偏移坐标 84 // let X = e.pageX - position.left; 85 // let Y = e.pageY - position.top; 86 // //定位放大镜的距离 87 // $("#big").scrollTop(Y-100).scrollLeft(X-100); 88 89 // //第二种 90 let x =$("#div").position().left/350*800; 91 let y =$("#div").position().top/350*800; 92 $("#big").css({ 93 backgroundPosition:`-${x}px -${y}px` 94 }) 95 96 97 }); 98 $("#small").on(‘mouseleave‘, function () {//鼠标移出时 99 $("#big").css({ 100 display: "none" 101 }) 102 $(‘#div‘).css({//小方块显示 103 display: "none", 104 105 }) 106 }) 107 108 // console.log($.unique($.merge([1,2],[2,3,4]))) 109 }) 110 </script> 111 </body> 112 113 </html>
以上是关于用JavaScript中jQuery编写放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章