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: absolute60 }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: y32 });33 $(‘.rightBox img‘).CSS({34 left: -2 * x,35 top: -2 * y36 });37 });38 39 $(‘.top‘).mouseleave(function () {40 $(‘.tool‘).hIDe();41 $(‘.rightBox‘).hIDe();42 });
效果：
总结
以上是内存溢出为你收集整理的商品放大镜案例全部内容，希望文章能够帮你解决商品放大镜案例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）