首页 > 代码库 > jQuery补充，模拟图片放大镜

jQuery补充，模拟图片放大镜

2024-09-21 07:23:30   216人阅读

jQuery补充，模拟图片放大镜

技术分享

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/fdj.css">
</head>
<body>

<div class="outer">                     <!--放大镜主体div-->
    <div class="small_box">             <!--放大镜小图区域-->
        <div class="float"></div>       <!--小图里的玻璃罩区域-->
        <img src="img/small.jpg">
    </div>
    <div class="big_box">               <!--放大镜大图区域-->
        <img src="img/big.jpg">
    </div>
</div>
<script src="jquery/jquery.min.js"></script>
<script src="fdj.js"></script>
</body>
</html>

css

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
.outer{                         /*放大镜主体div*/
    width: 350px;
    height: 350px;
    border:5px solid #0f68ee;
}
.outer .small_box{              /*放大镜小图区域*/
    position: relative;
}
.outer .small_box .float{       /*放大镜小图区域里的玻璃罩*/
    width: 175px;
    height: 175px;
    background-color: #ABC7E2;
    opacity: 0.4;
    position: absolute;
    display: none;
}
.outer .big_box{                /*放大镜大图区域*/
    width: 400px;
    height: 400px;
    border:5px solid #0f68ee;
    overflow:hidden;
    position: absolute;
    top: 0;
    left: 370px;
    display: none;
}
.outer .big_box img{
    position: absolute;
}

js

/**
 * Created by admin on 2017/5/10.
 */
$(function () {
    // 当鼠标悬浮到小图片区域的时候，执行鼠标悬浮事件
    $(‘.outer .small_box‘).mouseover(function () {
        $(‘.outer .small_box .float‘).css(‘display‘,‘block‘);           //显示小图片区域里的玻璃罩
        $(‘.outer .big_box‘).css(‘display‘,‘block‘);                    //显示大图片区域
    });
    //当前鼠标离开小图片区域的时候，执行鼠标离开事件
    $(‘.outer .small_box‘).mouseout(function () {
        $(‘.outer .small_box .float‘).css(‘display‘,‘none‘);            //隐藏小图片区域里的玻璃罩
        $(‘.outer .big_box‘).css(‘display‘,‘none‘);                     //隐藏大图片区域
    });
    // 当鼠标在小图片区域移动的时候，执行鼠标移动事件
    $(‘.outer .small_box‘).mousemove(function (e) {
        var _event = e || window.event;                                 //接收事件里的event对象信息

        var small_box_height = $(‘.outer .small_box‘).height();         //获取小图区域div的高度
        var small_box_width = $(‘.outer .small_box‘).width();           //获取小图区域div的宽度

        var float_height = $(‘.outer .small_box .float‘).height();      //获取小图区域里的玻璃罩高度
        var float_width = $(‘.outer .small_box .float‘).width();        //获取小图区域里的玻璃罩宽度

        var float_height_ban = $(‘.outer .small_box .float‘).height()/2;    //获取小图区域里的玻璃罩一半高度
        var float_width_ban = $(‘.outer .small_box .float‘).width()/2;      //获取小图区域里的玻璃罩一半宽度

        //换算玻璃罩滑动值
        var mouse_left = _event.clientX - float_width_ban;                  //将鼠标点与左边边距，减去玻璃罩的一半，就是玻璃罩横向滑动值
        var mouse_top = _event.clientY - float_height_ban;                  //将鼠标点与上边边距，减去玻璃罩的一百，就是玻璃罩纵向滑动值

        if (mouse_left < 0){                                                //玻璃罩横向滑动值，如果小于0
            mouse_left = 0;                                                 //将璃罩横向滑动值，设置为0
        }else if (mouse_left >small_box_width - float_width){               //判断璃罩横向滑动值，如果大于了小图区域宽度减去玻璃罩宽度，说明璃罩横向滑动值向右已经超出了小图区域
            mouse_left = small_box_width - float_width;                     //将璃罩横向滑动值，设置成小图区域宽度减去玻璃罩宽度，就是横向滑动值向右到头
        }

        if (mouse_top < 0){                                                 //玻璃罩纵向滑动值，如果小于0
            mouse_top = 0;                                                  //将璃罩纵向滑动值，设置为0
        }else if (mouse_top >small_box_height - float_height){              //判断璃罩纵向滑动值，如果大于了小图区域高度减去玻璃罩高度，说明璃罩纵向滑动值向下已经超出了小图区域
            mouse_top = small_box_height - float_height;                    //将璃罩纵向滑动值，设置成小图区域高度减去玻璃罩高度，就是纵向滑动值向下到头
        }

        $(‘.outer .small_box .float‘).css(‘left‘,mouse_left + ‘px‘);        //获取到玻璃罩纵向滑动值
        $(‘.outer .small_box .float‘).css(‘top‘,mouse_top + ‘px‘);          //获取到玻璃罩横向滑动值

        //换算大图滑动比例
        //将大图片的宽度减去大图容器div宽度，除以小图容器div宽度减去玻璃罩宽度，等于大图反向横向滑动比例
        var percentX = ($(‘.outer .big_box img‘).width()-$(‘.outer .big_box‘).width())/(small_box_width-float_width);
        //将大图片的高度减去大图容器div高度，除以小图容器div高度减去玻璃罩高度，等于大图反向纵向滑动比例
        var percentY = ($(‘.outer .big_box img‘).height()-$(‘.outer .big_box‘).height())/(small_box_height-float_height);

        $(‘.outer .big_box img‘).css(‘left‘,-percentX*mouse_left+‘px‘); //反向横向滑动比例，除以玻璃罩横向滑动值，等于大图横向滑动值
        $(‘.outer .big_box img‘).css(‘top‘,-percentY*mouse_top+‘px‘);   //反向纵向滑动比例，除以玻璃罩纵向滑动值，等于大图纵向滑动值
    });

});

 

jQuery补充，模拟图片放大镜


联系
我们