js图片放大特效 js图片变大 收藏 0

js如何获取屏幕、窗口和网页的大小

平时对于各种尺寸总是搞不清楚，比如屏幕、窗口、网页的尺寸大小，这些大小是如何定义的，下来将详细介绍它们的不同之处。

主要有以下几种尺寸：

1.1 屏幕尺寸

屏幕尺寸是屏幕的宽度和高度:显示器或移动屏幕。

window.screen 是保存屏幕大小信息的对象。以下是获取屏幕宽度和高度的方法：

1.2 可用的屏幕尺寸

可用屏幕大小包括活动屏幕的宽度和高度，不包括操作系统工具栏、任务栏等。

要获取可用的屏幕大小，使用window.screen对象中下面这个属性：

2.1 窗口外部尺寸

窗口外部大小由整个浏览器窗口的宽度和高度组成，包括地址栏、标签栏和其他浏览器面板。

要获取整个浏览器窗口的大小，可以直接使用window对象上提供的outerWidth和outerHeight属性：

2.2 窗口内部尺寸

窗口内部尺寸(也称为可视窗口尺寸)由显示网页的视窗的宽度和高度组成，不包括地址栏、标签栏和其他浏览器面板。

window对象提供了 innerWidth 和 innerHeight 属性：

如果您想在没有滚动条的情况下访问窗口内部大小，可以使用以下代码：

网页大小指由页面内容的实际宽度和高度组成。

使用以下代码 网页内容的大小（包括页面的填充，但不包括边框、边距或滚动条）：

如果 网页高度（pageHeight） 大于窗口内部高度（innerHeight），则显示垂直滚动条。

现在您对如何确定不同类型的尺寸是否有了更好的了解。

• 屏幕大小是整个屏幕（或显视器）的大小，而可用屏幕大小是不包括操作系统任务栏或工具栏的显视器大小。
• 窗口外部大小是整个浏览器窗口（包括地址栏、标签栏、侧面板（如果打开）），而窗口内部大小是网页显示的视口大小。
• 最后，网页大小是指网页及其内容的大小。

功能问题：如何实现图片放大镜功能？

大家好，我是大澈！

本文约2900+字，整篇阅读大约需要4分钟。

感谢关注微信公众号：“程序员大澈”，免费领取\”面试礼包\”一份，然后免费加入问答群，从此让解决问题的你不再孤单！

平常我们一般都是在手机淘宝上购物，不知道大家有没有体验过PC端淘宝，里面有很多好玩的设计。

比如我们今天要实现的功能：图片放大镜，这是一个在电商网站应用非常广的设计。

鼠标移入左侧缩略图时，小盒子和右边大图显示，并且小盒子跟随鼠标移动，右侧大图出现放大效果。

再梳理一下，图片放大镜功能设计有如下几个优点：

• 提供更好的用户体验：通过放大镜功能，用户可以在不离开当前页面或进一步导航的情况下，更详细地查看图像的细节。
• 提供互动性：放大镜功能增加了用户与图像的互动性。通过鼠标悬停或触摸屏幕，用户可以控制放大镜的位置，并实时查看所选区域的放大效果。
• 增强响应式设计：无论用户使用大屏幕设备还是小屏幕设备，他们都能够在需要时放大图像，轻松查看细节。

图片放大镜功能的实际应用场景有很多，如电子商务、艺术设计展示、图片库等。

要实现图片放大镜功能，一般有两种方式：一种是 利用原生JS动态设置偏移量，一种是 利用原生JS的Canvas动态截取。

当然，实现方式一定不仅仅只有这几种，还有很多可以尝试的其它办法，这里期待朋友们补充指教吧！

下面我们一起来看看，上述两种原生JS的具体实现。

先简单聊聊这两种原生JS方式的实现原理，再附上可直接使用的源码，最后置身于真实项目中，对图片放大镜功能的实现做一下小结。

2.1 方式一 动态设置偏移量

此方式中，左侧缩略图和右侧大图插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏。

先实现小盒子跟着鼠标移动的功能，且小盒子不能移出边界。

再实现右侧大图随着小盒子的移动实现自身移动，且两者移动方向总是相反的。

2.2 方式二 Canvas动态截取

此方式中，页面上总共放三块画布。一块放左侧缩略图，一块放小盒子，一块放右侧大图。

先实现小盒子跟随鼠标在左侧缩略图上移动。

再把小盒子内的图片截取出来，按比例放到右侧大图的画布上，从而实现放大效果。

2.3 小结

对于图片放大镜功能的实现，上述两种原生JS方式其实都不算复杂。

我们只需要在使用时，细细梳理一遍代码，再修改一些必要参数即可，不需要钻牛角尖过分纠结。

在真实项目中，我们更应该有如下考虑：

对于Vue2项目，可直接使用vue2.0-zoom库。

对于Vue3项目，可直接使用zoomer-vue3库。

如需高度自定义时，可使用上述两种原生JS方式择其一来手写。

结语

建立这个平台的初衷：

• 打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。
• 遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。
• 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号：“程序员大澈”，免费领取\”面试礼包\”一份，然后免费加入问答群，从此让解决问题的你不再孤单！

1.9K star！这款 JavaScript 神器，几行代码轻松实现 360° 全景图

各位头条的朋友们好！小墨又来给大家分享好东西啦！ 本期要介绍的是一款能让你的网页瞬间高大上的 JavaScript 库，Photo-Sphere-Viewer。它可以轻松展示 360° 全景图片，让用户身临其境！

别看“全景展示”听起来很高大上，其实用 Photo-Sphere-Viewer 非常简单！它支持 JPEG、PNG 等常见图片格式，只需要几行代码就能轻松搞定，小白也能快速上手！

举个栗子：

简单几步，一个炫酷的全景展示就完成啦！是不是so easy？

Photo-Sphere-Viewer 不仅简单易用，而且功能十分强大。除了基础的 360° 视角旋转和缩放，它还支持：

• 自动旋转： 营造动态展示效果，让你的全景图片更生动！
• 自定义初始视角： 你可以自由设置用户第一眼看到的画面。
• 丰富的插件系统： 可以添加标记、热点、指南针等，增强互动性。

想象一下，用户可以自由旋转视角，查看每个角落，还能点击标记查看详细信息，是不是很酷炫？

当然，任何工具在使用过程中都难免会遇到一些小坑，小墨也分享一下我的踩坑经验，希望能帮助大家少走弯路。

问题一： 图片加载缓慢？

解决方案： 建议使用压缩后的图片，或者使用图片 CDN 加速加载。

问题二： 移动端体验不佳？

解决方案： Photo-Sphere-Viewer 本身就具有良好的响应式设计，但为了最佳体验，建议根据不同设备调整参数。

例如：

https://github.com/mistic100/Photo-Sphere-Viewer

总的来说，Photo-Sphere-Viewer 是一款非常实用且强大的工具，可以极大地提升网页的视觉效果和交互体验。无论是电商产品展示、虚拟旅游，还是在线教育，它都能愉快的使用！ ✨

你还有什么想了解的？欢迎在评论区留言，小墨在线为你解答！ 别忘了点赞关注哦~ 我们下期再见！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com