css+jquery 实现图片局部放大预览

Posted 2020-12-25 RemiHoston

            今天有时间开始动手,使用css+jquery实现了图片局部放大的组件,首先看看效果图:

          界面设计思路如下: 

   1.两个div,左边放图片的缩略图
   2.在左边缩略图鼠标移动的时候,区域(效果图中的网格)
   3.右边放大图div,背景为缩略图的大图,在鼠标移入缩略图中,通过获取鼠标的坐标,将右侧背景图片移动到跟鼠标坐标对应的位置
   4.设计时尽量,获取原大图的尺寸,和缩略图视窗计算比例,更大精度的做到左侧缩略图上表示的区域,和右侧放大部分匹配

         本示例大部分编码在javascript脚本,以下列出各部分的源码: 

<div class="all-region">
    <div class="image-wrap">
       <!--缩略图div-->
        <div class="little-img">
            <img src="./images/show-window/timg.jpg">
        </div>
       <!--图片放大div-->
        <div class="large-img">
        </div>
        <!--缩略图上展示被放大的区域,网格区域-->
        <div class="relative-region"></div>
    </div>
</div>

        css:

    .all-region {
        width: 100%;
        height: auto;
    }

    .all-region .image-wrap {
        width: 1300px;
        margin: 0px auto;
        height: 300px;
        line-height: 300px;
        overflow: hidden;
        vertical-align: center;
        background: #FBFBFB;
        border-left: 1px solid #ebebeb;
        position: relative;
    }

    .image-wrap .little-img img {
        width: 600px;
        height: 300px;
    }

    .image-wrap .large-img {
        width: 600px;
        height: 300px;
        background-image: url("./images/show-window/timg.jpg");
        border: 1px solid transparent;
        background-size: inherit;
        background-repeat: no-repeat;
        background-position-x: 0px;
        background-position-y: 0px;
        position: relative;
        top: -301px;
        left: 605px;
        float: left;
        z-index: 10;
        opacity: 0;
        display: none;
        transition: opacity 2s linear;
        overflow: hidden;
    }
    .relative-region {
        background: linear-gradient(45deg, rgba(46, 46, 46, 0.5) 50%, transparent 0),
        linear-gradient(135deg, rgba(200, 200, 200, .5) 70%, transparent 0);
        display: none;
        position: relative;
        z-index: 99;
        background-size: 5px 5px;
    }

          Javascript:

class Elements {
        constructor() {
            //缩略图区域
            this.sourceImage = $(".little-img");
            //放大区域
            this.aimImage = $(".large-img");
            //视图图片,与图片实际尺寸比例
            this.sourceToAimRate = 0.01;
            //原图高度
            this.sourceHeight = 0;
            //原图宽度
            this.sourceWidth = 0;
            //视图高度,div的高度,本例是300px
            this.containerHeight = this.sourceImage.children().height();
            this.containerWidth = this.sourceImage.children().width();
            //鼠标在缩略图上的坐标 offsetX
            this.cursor_x = 0;
            this.cursor_y = 0;
            //标志被放大的区域
            this.region = $(".relative-region");

            this.mouseMove = this.mouseMove.bind(this);
            this.regionPosition = this.regionPosition.bind(this);
            this.regionMove = this.regionMove.bind(this);
            this.caculatorRate = this.caculatorRate.bind(this);
        }
        //计算原图尺寸,思路是内存加载原图,获得尺寸,并计算容器视图和原图的比例
        caculatorRate() {
            console.log(this.sourceImage.children().attr("src"));
            $("<img/>").attr("src", this.sourceImage.children().attr("src")).load((e) => {
                //let sourceImageWidth=e.target.width;
                this.sourceWidth = e.target.width;
                this.sourceHeight = e.target.height;
                //计算图片和容器的像素比例
                this.sourceToAimRate = this.sourceWidth / this.containerWidth;
            });
        }
        //鼠标在缩略图上移动时计算,放大图的背景位置,并且定位标识被放大的区域
        mouseMove(e) {
            //console.log(`x:${e.offsetX},y:${e.offsetY}`);
            //偏离region的位置
            //由于鼠标实际上是在标识被放大区域(网格区域)的div里面,所以通过e获取的实际上是缩略图内,网格标识的offsetX 要用网格区域的offsetX+offsetLeft-缩略图的offsetleft才是鼠标对应到缩略图上的位置
            let r_x = e.offsetX;
            let r_y = e.offsetY;

            let s_t = this.sourceImage.offset().top;
            let s_l = this.sourceImage.offset().left;

            let r_t = this.region.offset().top;
            let r_l = this.region.offset().left;

            let x = r_l - s_l + r_x;
            let y = r_t - s_t + r_y;

            //在原图上显示,被放大的区域
            let w = this.region.width();
            let h = this.region.height();

             //由于鼠标在网格区域的中心,所以在计算放大图的top和left的时候,实际是从网格的左上角位置
            this.cursor_x = (x - w / 2) * this.sourceToAimRate;
            this.cursor_y = (y - h / 2) * this.sourceToAimRate;
            if (this.cursor_x + this.containerWidth > this.sourceWidth) {
                this.cursor_x = this.sourceWidth - this.containerWidth;
            }
            if (this.cursor_y + this.containerHeight > this.sourceHeight) {
                this.cursor_y = this.sourceHeight - this.containerHeight;
            }
            if (this.cursor_y < 0) {
                this.cursor_y = 0;
            }
            if (this.cursor_x < 0) {
                this.cursor_x = 0;
            }
            this.aimImage.css({
                "background-position-x": -this.cursor_x + "px",
                "background-position-y": -this.cursor_y + "px"
            }); 
            this.regionMove(w, h, x, y); 
}
        regionPosition(r_w, r_h, e) {
            let left = e.offsetX - r_w / 2;
            let top = e.offsetY - r_h / 2; 
            if (left < 0) {
                left = 0;
            }
            if (left + r_w > this.containerWidth) {
                left = this.containerWidth - r_w;
            }
            if (top < 0) {
                top = 0;
            }
            if (top + r_h > this.containerHeight) {
                top = this.containerHeight - r_h;
            }
            this.region.css({
                "top": (top - this.containerHeight) + "px",
                "left": left+ "px",
                "cursor": "crosshair"
            });
        } 
        regionMove(r_w, r_h, x, y) {
            let left = x - r_w / 2;
            let top = y - r_h / 2;

            if (left < 0) {
                left = 0;
            }
            if (left + r_w > this.containerWidth) {
                left = this.containerWidth - r_w;
            }
            if (top < 0) {
                top = 0;
            }
            if (top + r_h > this.containerHeight) {
                top = this.containerHeight - r_h;
            }
            this.region.css({"top": (top - this.containerHeight) + "px", "left": left + "px"});
        }

        init() {
            this.caculatorRate();
            //鼠标移入缩略图区域,由缩略图区域的hover事件初始化,将鼠标放入网格区域的中心
            this.sourceImage.children().mouseover((e) => {
                this.aimImage.css({"display": "block", "opacity": "1"});
                let r_w = this.containerWidth / this.sourceToAimRate;
                let r_h = this.containerHeight / this.sourceToAimRate;
                let x = e.offsetX;
                let y = e.offsetY;
                this.regionPosition(r_w, r_h, e);
                this.region.css({"display": "block", "height": r_h + "px", "width": r_w + "px"});
            });
            //修复鼠标在region上,右侧放大区域闪动
            this.region.mousemove(this.mouseMove);
            this.region.mouseleave(() => {
                this.aimImage.css({"display": "none", "opacity": "0"});
                this.region.css({"display": "none"});
            });
        }
    } 
    $(function () {
        var e = new Elements();
        e.init();
    })

         由于原图是1920*1080不是缩略视窗严格的2:1,计算中有小数等原因,使网格标识的区域,和放大区域展示的完全匹配

         在下一篇将尝试,放大镜逆应用为缩小镜,实现图片裁剪的时候,标识裁剪的部分位于原图的位置和区域.