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>
