使用 JavaScript 和 CSS 的简单图像放大镜

简介: 使用 JavaScript 和 CSS 的简单图像放大镜

图像放大镜在很多网站中都扮演着重要的角色,大多数开发人员使用 jquery 来创建图像放大镜。在本教程中,我将向大家展示如何使用 HTML、CSS 和 JavaScript 制作一个简单的图像放大镜。

✨ 项目基本结构


目录结构如下:

├── css
│   └── style.css
├── js
│   └── script.js
├── img
│   └── img.png
└── index.html

第 1 步:图像放大镜的基本结构结构

使用以下 HTML 和 CSS 代码,首先在网页上为此图像放大镜 HTML创建了一个框。您可以在此框中看到图像。这里框的宽度:650px,高度:400 像素已经用过。它被一个 5px 的边框包围。

<div class="container">
</div>
body,
html {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  min-width: 700px;
  background: rgb(202, 201, 201);
}
.container {
  width: 650px;
  height: 400px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid rgb(244, 254, 255);
}

image.png

第 2 步:将图像添加到放大镜


现在,一个图像已添加到这个简单的图像放大镜项目中。在这里,您可以使用您选择的图像。

<div id="zoom">
  <img src="https://ucc.alicdn.com/images/user-upload-01/c43ca410ce4a40e4836664f7dbe98ad5.png" alt="">
</div>
#zoom img{
  width: 650px;
  height: 400px;
}

image.png

第 3 步:CSS设计放大镜

现在已经创建了放大镜玻璃,可以在其中通过缩放看到图像。我将通过 JavaScript 添加这个元素。现在我只是在设计。

#lens {
  position: absolute;
  border: 2px solid grey;
  border-radius: 50%;
  overflow: hidden;
  cursor: none;
  box-shadow: inset 0 0 10px 2px grey;
  filter: drop-shadow(0 0 2px grey);
}
#lens > * {
  cursor: none;
}

第 4 步:使用 JavaScript 激活图像放大镜

这个CSS 图像放大镜需要一些 JavaScript 才能工作。没有使用 jQuery 或外部库。因此,如果您了解基本的 JavaScript,您就可以构建它。

//lensSize => 宽度和高度
const lensSize = 200;
function magnify(id, zoom){
  const el = document.getElementById(id);
//cloneNode() 方法创建一个节点的副本,并返回克隆
  const copy = el.cloneNode(true);
//createElement() 方法创建由 tagName 指定的 HTML 元素
  const lens = document.createElement("div");
//setAttribute() 设置指定元素的属性值
  lens.setAttribute("id","lens")  
  lens.style.width = lensSize + "px";
  lens.style.height = lensSize + "px";
//appendChild() 方法用于插入一个新节点
  el.appendChild(lens);
//getBoundingClientRect() 方法返回元素的大小及其位置
  el.getBoundingClientRect();
  copy.style.zoom = zoom;
  lens.appendChild(copy);
  copy.style.width = (el.offsetWidth * zoom) + "px";
  copy.style.heigth = (el.offsetHeight * zoom) + "px";
  copy.style.position = "absolute";
//当指针在元素上移动时执行 MouseMove
  el.addEventListener("mousemove", (ev) => {
//preventDefault() 方法停止选定元素的默认操作
    ev.preventDefault();
    ev.stopPropagation();
    const pos = getCursorPos(ev);
    lens.style.left =  - (lensSize/2) + pos.x + "px";
    lens.style.top = - (lensSize/2) + pos.y + "px";
    copy.style.left = - (pos.x - el.offsetLeft) + (lensSize/zoom)*0.5 + "px";
    copy.style.top = - (pos.y - el.offsetTop) + (lensSize/zoom)*0.5  + "px";
  })
}
  function getCursorPos(e) {
    var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    return {x : x , y : y};
  }
//放大值
magnify("zoom", 4)

JavaScript 图像放大镜在很多网站中都扮演着非常重要的角色。如果你需要放大项目中的任何图像,则可以使用这种 javascript 类型的图像放大镜 。


目录
相关文章
|
7天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
30天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
120 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
2月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
59 3
|
3月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
3月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
124 12
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。

热门文章

最新文章