图放大镜

首先放大镜的原理，通过调整移动距离比例，由左方小图片中移动小方框，显示右边提前设置好的窗口中放大的局部图片

(图片可以自己在网上找)

效果图:

 我们先写一个简单的html:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/join.css"/>
 7         <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 8         <script src="js/detail.js" type="text/javascript" charset="utf-8"></script>
 9     </head>
10     <body>     
11      <div class="pics-box">
12                 <div class="small_box">
13                     <span class="mask"></span>
14                     <span class="float_layer"></span>
15                     <img src="img/7_418x418.jpg">
16                 </div>
17                 <div class="big_box">
18                     <img src="img/7_800x800.jpg">
19                 </div>
20     </body>
21 </html>

写一个放大镜功能样式

/*放大镜功能样式*/

.pics-box {
    position: relative;
}

.small_box {
    width: 400px;
    height: 400px;
    border: 1px solid #ddd;
}

.small_box img {
    width: 100%;
}

.small_box .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    z-index: 2;
    cursor: move;
}

.small_box .float_layer {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

.big_box {
    position: absolute;
    left: 400px;
    top: 0;
    width: 400px;
    height: 400px;
    overflow: hidden;
    display: none;
    border: 1px solid #ddd;
}

.big_box img {
    position: absolute;
}

JQuery是一个快速简洁的JavaScript框架，jquery-3.3.1.js和jquery-3.3.1.min.js;

bootstrap-3.3.7-dist文件 (包含jquery-3.2.1.min.js)：

https://pan.baidu.com/s/1mSWHJWCS_DqNtx1ifyUUpw  提取码：jgxm

 

写一个引用 这一行的js<script src="js/detail.js" type="text/javascript" charset="utf-8"></script>

 1 $(function () {
 2     $(".small_box").hover(function () {
 3         $(this).find(".float_layer").show();
 4         $(".big_box").show();
 5     }, function () {
 6         $(this).find(".float_layer").hide();
 7         $(".big_box").hide();
 8     })
 9     $(".small_box").mousemove(function (e) {
10         //鼠标位置
11         var x = e.offsetX, y = e.offsetY;
12         //小黑框的左上角位置,-100 让鼠标永远在小黑框的中间位置，如果不减，就是在小黑框的左上角位置
13         var left = x - 100, top = y - 100;
14         if (left < 0) {
15             left = 0;
16         }
17         if (top < 0) {
18             top = 0;
19         }
20         if (left > 200) {
21             left = 200;
22         }
23         if (top > 200) {
24             top = 200;
25         }
26         $(this).find(".float_layer").css({
27             top: top + "px",
28             left: left + "px"
29 
30         })
31         $(".big_box img").css({
32             top: -2 * top + "px",
33             left: -2 * left + "px"
34         })
35     })
36 })

 

posted @ 2021-11-15 19:08  小小不小阿  阅读(48)  评论(1)  编辑  收藏  举报