1 <!DOCTYPE html> 2 <html lang="en"> 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>Document</title> 8 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 9 <style> 10 .magnifierbox{ 11 margin:20px auto; 12 width:600px; 13 height:300px; 14 overflow:hidden; 15 position:relative; 16 } 17 .magnifierbox .smallbox,.magnifierbox .bigbox{ 18 float:left; 19 width:300px; 20 height:100%; 21 overflow:hidden; 22 position:relative; 23 } 24 .magnifierbox .bigbox img { 25 position:absolute; 26 top:0; 27 left:0; 28 } 29 .magnifierbox .smallbox .mark{ 30 position:absolute; 31 top:0; 32 left:0; 33 z-index:10; 34 width:100px; 35 height:100px; 36 background:#E01D20; 37 opacity:0.3; 38 filter:alpha(opacity=30); 39 cursor:move; 40 } 41 .magnifierbox .smallbox .mark{ 42 display:none; 43 } 44 </style> 45 </head> 46 <body> 47 <section class="magnifierbox"> 48 <div class="smallbox"> 49 <img src="./small.jpg" alt=""> 50 <div class="mark"></div> 51 </div> 52 <div class="bigbox"> 53 <img src="./big.jpg" alt=""> 54 </div> 55 </section> 56 57 <script> 58 <!--1、鼠标进入和离开smallbox，需要控制mark盒子以及bigbox的显示和隐藏 --> 59 <!--2、控制mark盒子在samllbox中运动，但是不能超过界限 --> 60 <!--3、当mark和子在samllbox移动的时候，根据mark盒子移动的距离，--> 61 <!-- 计算出bigbox移动的距离（samllbox移动一点距离，bigbox盒子移动方向与samllbox移动相反， --> 62 <!-- 且x/y轴移动是三倍，这里做的是两个图是1:3的关系） --> 63 <!-- add方法是讲一个元素加入到一个jquery集合中 --> 64 $(function(){ 65 var $magnifierbox = $(".magnifierbox"), 66 $smallbox = $magnifierbox.find(".smallbox"), 67 $mark = $magnifierbox.find(".mark"), 68 $bigbox = $magnifierbox.find(".bigbox"), 69 $bigimg = $bigbox.find("img"); 70 71 $smallbox.on("mouseenter",function(event){ 72 <!-- 刚进入盒子计算宽高需要确定盒子位置 --> 73 computedMark(event) 74 $mark.add($bigbox).css("display","block") 75 }).on("mouseleave",function(){ 76 $mark.add($bigbox).css("display","none") 77 }).on("mousemove",function(event){ 78 <!-- jqeruy对event对象经过包装过了，对所有的浏览器都兼容 --> 79 <!--mark盒子移动时计算盒子的距离 --> 80 computedMark(event); 81 }) 82 83 <!-- <--实时计算mark盒子的位置--> --> 84 function computedMark(event){ 85 <!-- 获取magnifierbox盒子距离html左上角顶点的距离 --> 86 var pL = $magnifierbox.offset().left, 87 pT = $magnifierbox.offset().top, 88 mcL = event.clientX, #鼠标距离左上角X距离 89 mcT = event.clientY, #鼠标距离左上角Y距离 90 mw = $mark.innerWidth(), #mark宽度 91 mh = $mark.innerHeight(), #mark高度 92 dpL = (mcL - pL)-mw/2, #mark盒子距离父盒子左上角X距离 93 dpT = (mcT - pT)-mh/2, #mark盒子距离父盒子左上角Y距离 94 sw = $smallbox.width(), #mark父盒子宽度 95 sh = $smallbox.height(), ##mark父盒子高度 96 swMax = sw - mw, #mark能移动的最小宽度 97 shMax = sh - mh, #mark能移动的最大高度 98 swMin = 0, #mark能移动的最小宽度 99 shMin = 0; #mark能移动的最小高度 100 dpL = dpL < swMin?swMin:(dpL>swMax?swMax:dpL); 101 dpT = dpT < shMin?shMin:(dpT>shMax?shMax:dpT); 102 <!--设置mark盒子移动位置：注意：这里将是鼠标箭头移到了mark盒子中点位置 --> 103 $mark.css({ 104 top:dpT, 105 left:dpL, 106 }) 107 <!-- 注意：小图和大图相差三倍，如果不是整数比例还得计算 --> 108 $bigimg.css({ 109 top:-dpT*3, 110 left:-dpL*3, 111 }) 112 } 113 }) 114 115 </script> 116 </body> 117 </html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .magnifierbox{ margin:20px auto; width:600px; height:300px; overflow:hidden; position:relative; } .magnifierbox .smallbox,.magnifierbox .bigbox{ float:left; width:300px; height:100%; overflow:hidden; position:relative; } .magnifierbox .bigbox img { position:absolute; top:0; left:0; } .magnifierbox .smallbox .mark{ position:absolute; top:0; left:0; z-index:10; width:100px; height:100px; background:#E01D20; opacity:0.3; filter:alpha(opacity=30); cursor:move; } .magnifierbox .smallbox .mark{ display:none; } </style></head><body> <section class="magnifierbox"> <div class="smallbox"> <img src="./small.jpg" > <div class="mark"></div> </div> <div class="bigbox"> <img src="./big.jpg" > </div> </section>
<script> <!--1、鼠标进入和离开smallbox，需要控制mark盒子以及bigbox的显示和隐藏 --> <!--2、控制mark盒子在samllbox中运动，但是不能超过界限 --> <!--3、当mark和子在samllbox移动的时候，根据mark盒子移动的距离，--> <!-- 计算出bigbox移动的距离（samllbox移动一点距离，bigbox盒子移动方向与samllbox移动相反， --> <!-- 且x/y轴移动是三倍，这里做的是两个图是1:3的关系） --> <!-- add方法是讲一个元素加入到一个jquery集合中 --> $(function(){ var $magnifierbox = $(".magnifierbox"), $smallbox = $magnifierbox.find(".smallbox"), $mark = $magnifierbox.find(".mark"), $bigbox = $magnifierbox.find(".bigbox"), $bigimg = $bigbox.find("img");
$smallbox.on("mouseenter",function(event){ <!-- 刚进入盒子计算宽高需要确定盒子位置 --> computedMark(event) $mark.add($bigbox).css("display","block") }).on("mouseleave",function(){ $mark.add($bigbox).css("display","none") }).on("mousemove",function(event){ <!-- jqeruy对event对象经过包装过了，对所有的浏览器都兼容 --> <!--mark盒子移动时计算盒子的距离 --> computedMark(event); })
<!-- <--实时计算mark盒子的位置--> --> function computedMark(event){ <!-- 获取magnifierbox盒子距离html左上角顶点的距离 --> var pL = $magnifierbox.offset().left, pT = $magnifierbox.offset().top, mcL = event.clientX, #鼠标距离左上角X距离 mcT = event.clientY, #鼠标距离左上角Y距离 mw = $mark.innerWidth(), #mark宽度 mh = $mark.innerHeight(), #mark高度 dpL = (mcL - pL)-mw/2, #mark盒子距离父盒子左上角X距离 dpT = (mcT - pT)-mh/2, #mark盒子距离父盒子左上角Y距离 sw = $smallbox.width(), #mark父盒子宽度 sh = $smallbox.height(), ##mark父盒子高度 swMax = sw - mw, #mark能移动的最小宽度 shMax = sh - mh, #mark能移动的最大高度 swMin = 0, #mark能移动的最小宽度 shMin = 0; #mark能移动的最小高度 dpL = dpL < swMin?swMin:(dpL>swMax?swMax:dpL); dpT = dpT < shMin?shMin:(dpT>shMax?shMax:dpT); <!--设置mark盒子移动位置：注意：这里将是鼠标箭头移到了mark盒子中点位置 --> $mark.css({ top:dpT, left:dpL, }) <!-- 注意：小图和大图相差三倍，如果不是整数比例还得计算 --> $bigimg.css({ top:-dpT*3, left:-dpL*3, }) } })
</script></body></html>
原文：https://www.cnblogs.com/lanxiansen/p/10954126.html
