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 /* 初始化 */
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 ul {
7 list-style: none;
8 }
9
10 /* 版心 */
11 .w {
12 width: 1120px;
13 margin: 0 auto;
14 }
15
16 /* 左侧盒子 */
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 });
效果：
原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11608655.html
时间： 2024-10-10 00:49:16