JavaScript实现图片放大预览效果
作者:火星飞鸟 发布时间:2023-08-23 02:41:17
标签:JavaScript,图片,放大
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.preview-img {
position: relative;
height: 398px;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: skyblue;
opacity: .4;
border: 1px solid #ccc;
cursor: move;
}
.big {
overflow: hidden;
display: none;
position: absolute;
top: 0;
left: 410px;
width: 500px;
height: 500px;
background-color: pink;
z-index: 99;
border: 1px solid #ccc;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview-img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 显示与隐藏
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
});
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
});
// 盒子跟随鼠标移动
preview_img.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
var maskMax = preview_img.offsetHeight - mask.offsetHeight;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大图,根据比例计算坐标
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = bigMax * maskX / maskMax;
var bigY = bigMax * maskY / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
});
});
</script>
<div class="preview-img">
<img src="https://s1.ax1x.com/2020/10/12/027yRg.jpg" alt="">
<div class="mask"></div>
<div class="big">
<img src="https://s1.ax1x.com/2020/10/12/0276zQ.jpg" alt="" class="bigImg">
</div>
</div>
</body>
</html>
实现效果:
来源:https://www.cnblogs.com/jacklzx/p/13802259.html
0
投稿
猜你喜欢
- 一天不小心把ROOT的权限改到最小了(只能登录,什么都做不了),这可急死我了.重装的话太麻烦,而且里面有很多的用户,一个个重新弄不知道到什么
- 引言这算是一个高级用法了,前面我们只说到对类型、变量的几种反射的用法,包括如何获取其值、其类型、以及如何重新设置新值。但是在项目应用中,另外
- Microsoft SQL Server 2005 Mobile Edition 3.0 (SQL Server Mobile) 支持两种与
- 1、现象a.用localhost访问,正常b.用IP地址访问,则出现403错误2、分析a.怀疑是ACL问题,设置Everyone为完全控制,
- 背景客户最近有这样的需求,想通过统计Oracle数据库活跃会话数,并记录在案,利用比对历史的活跃会话的方式,实现对系统整体用户并发量有大概的
- udf_WeekDayName 代码如下:CREATE FUNCTION [dbo].[udf_WeekDayName] ( ) RETUR
- PL/SQL是由Oracle公司对标准SQL进行扩展,专用于Oracle数据库中程序设计的专用语言,属第三代过程式程序设计语言。从Oracl
- 阅读上一章:Chapter 14 图片替换Chapter 15 为<body>指定样式把内容与显示效果分开设定的好处之一就是灵活
- 使用fso对象遍历指定文件夹函数:'遍历文件夹sub ListFolderContents(path) &nbs
- 正确使用字体和颜色可以让网页内容更易阅读,下面我们来看看具体的优化措施。留意颜色的对比对于视力不太好的人或者对于不太好的显示设备来说,黑地白
- httpwatch 的页面元素加载时间表里面有一堆的英文,平时也没注意看,今天瞟了一眼,觉得应该有些用处,就看了看,随便用蹩脚的英语水平翻译
- LoadRunner监控MySQLhttp://www.docin.com/p-92272846.htmlAdvanced MySQL Pe
- 天我们看看import的有关内容。编程时总是用到import导入,动不动就导入,很简单,但import到底是个什么功能,它的本质是什么?一.
- 构筑专业的网络站点和应用程序,先进的设计工具,功能强大,开放式集成系统;流畅的开发进程。Macromedia Dreamweaver MX
- 在PyTorch中,torch.Tensor类是存储和变换数据的重要工具,相比于Numpy,Tensor提供GPU计算和自动求梯度等更多功能
- 最近常有厦门的客户通过网站上的联系方式加我QQ,询问网站改版的情况。几乎每日都要针对客户网站存在的问题做一番分析,然后客户以价格等其他因素结
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗的解决方法分享。<div id='tes
- 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则!在这些简单的”秘
- 见以下两个文件:showimage.asp Change the HTTP header
- 信息架构的组件可以拆分成四类组织系统 如何组织信息,例如,依据主题或年代顺序。标签系统 如何表示信息,例如,科学术语(“Acer”)或通俗术