Commodity magnifying glass case

index.html：

 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   <link rel="stylesheet" href="index.css">
 9 </head>
10 <body>
11   <!--版心  -->
12   <div class="w">
13     <!-- 左侧 -->
14     <div class="leftBox">
15       <!-- 上 -->
16       <div class="top">
17         <!-- 小黄盒子 -->
18         <div class="tool"></div>
19         <!-- 中图 -->
20         <img src="img/m1.jpg">
21       </div>
22       <ul>
23         <li class="active">
24           <img src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg">
25         </li>
26         <li>
27           <img src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg">
28         </li>
29         <li>
30           <img src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg">
31         </li>
32       </ul>
33     </div>
34     <!-- 右侧 -->
35     <div class="rightBox">
36       <img src="img/b1.jpg" alt="">
37     </div>
38   </div>
39   <script src="lib/jquery-1.12.4.js"></script>
40   <script src="index.js"></script>
41 </body>
42 </html>

index.css：

1  / * Initialization * / 
2  * {
 . 3    margin : 0 ;
 . 4    padding : 0 ;
 . 5 }
 . 6  UL {
 . 7    List-style : none ;
 . 8 }
 . 9  
10  / * version core * / 
. 11  .W {
 12 is    width : 1120px ;
 13 is    margin : 0 Auto ;
 14 }
 15  
16  / * left cassette*/
17 .leftBox {
18   width: 400px;
19   float: left;
20   position: relative;
21 }
22 .leftBox .top {
23   width: 400px;
24   border:1px solid #ccc;
25 }
26 .leftBox .top img {
27   width: 400px;
28 
29 }
30 .leftBox ul {
31   width: 188px;
32   margin: 10px auto;
33 }
34 .leftBox ul li {
35   float: left;
36   width: 54px;
37   height: 54px;
38   border:1px solid #fff;
39 }
40 .leftBox ul li.active {
41   border-color: red;
42 }
43 .leftBox ul li + li {
44   margin-left: 10px;
45 }
46 
47 /* 右侧盒子 */
48 .rightBox {
49   float: left;
50   margin-left:10px;
51   width: 500px;
52   height: 500px;
53   border:1px solid #ccc;
54   overflow: hidden;
55   position: relative;
56   display: none;
57 }
58 .rightBox img {
59   position: absolute
60 }
61 
62 /* 小黄盒子 */
63 .leftBox .tool {
64   width: 250px;
65   height: 250px;
66   background: gold;
67   opacity: 0.5;
68   position: absolute;
69   display: none;
70 }

index.js：

 1 var path = 'img/';
 2 
 3 $('.leftBox li').mouseenter(function () {
 4   $(this).addClass('active').siblings().removeClass('active');
 5   $('.top img').prop('src', path + $(this).find('img').attr('msrc'));
 6   $('.rightBox img').prop('src', path + $(this).find('img').attr('bsrc'));
 7 });
 8 
 9 $('.top').mouseenter(function () {
10   $('.tool').show();
11   $('.rightBox').show();
12 });
13 
14 $('.top').mousemove(function (e) {
15   var x = e.pageX - $('.top').offset().left - $('.tool').width() / 2;
16   var y = e.pageY - $('.top').offset().top - $('.tool').height() / 2;
17   if (x <= 0) {
18     x = 0;
19   }
20   if (x >= $('.top').width() - $('.tool').width()) {
21     x = $('.top').width() - $('.tool').width();
22   }
23   if (y <= 0) {
24     y = 0;
25   }
26   if (y >= $('.top').height() - $('.tool').height()) {
27     y = $('.top').height() - $('.tool').height();
28   }
29   $('.tool').css({
30     left: x,
31     top: y
32   });
33   $('.rightBox img').css({
34     left: -2 * x,
35     top: -2 * y
36   });
37 });
38 
39 $('.top').mouseleave(function () {
40   $('.tool').hide();
41   $('.rightBox').hide();
42 });

effect:

Commodity magnifying glass case

Guess you like