css+jquery 实现图片局部放大预览
2024-10-18 23:34:55
今天有时间开始动手,使用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:;
opacity:;
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:;
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,计算中有小数等原因,使网格标识的区域,和放大区域展示的完全匹配
在下一篇将尝试,放大镜逆应用为缩小镜,实现图片裁剪的时候,标识裁剪的部分位于原图的位置和区域.
最新文章
- maven log4g 用法
- Hibernate criteria 增加排序项
- Notepad++的xml文本格式化
- Ubuntu下deb包的安装方法 (zz)
- HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误
- Java Android 注解(Annotation) 及几个常用开源项目注解原理简析
- 计算时间间隔的js
- jquery插件的写法
- 动态代理双剑客--JDK Proxy与CGLIB
- Zookeeper从入门到精通（开发详解，案例实战，Web界面监控）
- hadoop 2.7.3 集群安装
- 关于标签中常用的disabled
- （转）Linux服务器安装配置tomcat
- vue（基础一）_基本指令的使用
- [LeetCode&Python] Problem 404. Sum of Left Leaves
- Go Example--变量
- 图算法之——dijkstra算法
- Hive 系列（二）权限管理
- lufylegend:图形变形2
- [leetcode]Search in Rotated Sorted Array II @ Python