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

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

界面设计思路如下:

   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,计算中有小数等原因,使网格标识的区域,和放大区域展示的完全匹配

原文地址:https://www.cnblogs.com/andayhou/p/9373521.html

时间: 2024-10-14 09:25:04

css+jquery 实现图片局部放大预览的相关文章

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

Java实现图片裁剪预览功能

Java实现图片裁剪预览功能 在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import 

cropper.js实现图片裁剪预览并转换为base64发送至服务端。

一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时记得引入cropper.css 3. 此处后端使用的nodejs,不过不懂node的影响也不大. 二 . 图片裁剪并预览 1.首先利用cropper完成图片裁剪并预览: <input type="file" name="" id="imgBtn"

单张图片在线预览+图片压缩

该方法未测试浏览器兼容性,仅在谷歌上进行过测试. 图片在线预览:一般思路是通过获取file上的绝对路径并将路径赋值给src实现在线预览功能,但现实中的浏览器,尤其是高版本浏览器由于用户安全性考虑,不会让开发者通过file获取到绝对路径,因此使用H5中的画板功能,将图片进行重绘后,得到base64编码的dataURL,再将这个地址赋值给src实现在线预览功能. 图片压缩原理:将大图根据预定尺寸进行尺寸修改. <!DOCTYPE html> <html lang="en"

android GridView显示相同尺寸图片以及预览功能

项目描述: GridView加载图片,在程序中控制各个图片尺寸一致,点击图片进行预览,可以滑动切换查看不同的界面,可以手势控制图片缩放,效果图如下: 1.GridView控制每个控件大小一致 GridView中的控件大小在程序中控制,思路就是获取屏幕宽高,减去控件之间的空隙,除以每一行控件的个数,就是控件的宽,可以将控件的高设置与宽一致. 首先获取屏幕宽高 public static int screenWidth;//屏幕宽度 WindowManager windowManager = get

JQuery实现图片的预加载与延时加载

转自:http://www.rjboy.cn/?p=1002 预加载, Js代码   function loadimg(arr,funLoading,funOnLoad,funOnError){ var numLoaded=0, numError=0, isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false; var arr=isObject ? arr.get() : arr; f

巧用weui.gallery(),点击图片后预览图片

要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 要先给图片创建一个节点: var imgDom = $("<img class='weui-jiaj-img' />"); 因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的

iOS HTML图片本地预览

1.引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 2.原理 接触过web开发的人,就了解与html元素交互都是通过javascript进行的,比如点击.滑动等,比如点击标签的响应代码如下 var img = document.getElementById('test'); img.onclick = function() { do some

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage