JavaScript コンテナに限定され、アスペクト比と中央表示を維持しながら画像のドラッグとズームを実装するにはどうすればよいですか?
現代の Web 開発では、コンテナ内での画像のドラッグ、拡大縮小、制限は非常に一般的な要件です。今日は、画像のアスペクト比と中央表示を維持しながら、JavaScript を使用してこの機能を実装する方法を学びます。
まず、画像とコンテナを表示するための HTML ページが必要です。 HTML ドキュメントには、画像を表示するための HTML 要素とコンテナ要素を必ず含めてください。以下に示すように:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片拖动缩放</title>
<style>
/* 定义容器的样式 */
.container {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
/* 定义图片的样式 */
.image {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<img class="image lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="图片">
</div>
<script>
// 在这里编写 JavaScript 代码
</script>
</body>
</html>次に、JavaScript を使用して画像のドラッグとズーム機能を実装します。まず、イメージ要素とコンテナ要素を取得し、いくつかのイベント リスナーを追加する必要があります。
// 获取图片元素和容器元素
const image = document.querySelector('.image');
const container = document.querySelector('.container');
// 定义一些变量
let isDragging = false;
let prevX = 0;
let prevY = 0;
let scale = 1;
// 添加鼠标按下事件监听器
image.addEventListener('mousedown', e => {
isDragging = true;
prevX = e.clientX;
prevY = e.clientY;
});
// 添加鼠标移动事件监听器
image.addEventListener('mousemove', e => {
if (!isDragging) return;
const deltaX = e.clientX - prevX;
const deltaY = e.clientY - prevY;
// 计算新的位置
const newX = image.offsetLeft + deltaX;
const newY = image.offsetTop + deltaY;
// 将图片限制在容器内
const maxX = container.clientWidth - image.clientWidth;
const maxY = container.clientHeight - image.clientHeight;
const clampedX = Math.max(0, Math.min(newX, maxX));
const clampedY = Math.max(0, Math.min(newY, maxY));
// 更新图片的位置
image.style.left = clampedX + 'px';
image.style.top = clampedY + 'px';
prevX = e.clientX;
prevY = e.clientY;
});
// 添加鼠标松开事件监听器
image.addEventListener('mouseup', () => {
isDragging = false;
});
// 添加鼠标滚动事件监听器
container.addEventListener('wheel', e => {
e.preventDefault();
// 通过滚动的 deltaY 值来计算缩放比例
const deltaScale = 1 - e.deltaY * 0.01;
// 限制缩放比例的范围
scale = Math.max(0.1, Math.min(scale * deltaScale, 10));
// 更新图片的缩放
image.style.transform = `scale(${scale})`;
});この JavaScript コードの機能は、マウスが押されたときの現在のマウス位置を記録することです。そして、マウスが移動すると、マウスの位置の変化が計算され、その変化値に基づいて画像の位置が更新される。次に、マウスを放したら、ドラッグを停止します。最後に、マウスがスクロールすると、スクロールされた deltaY 値に基づいてズーム率が計算され、画像のズームが更新されます。
このようにして、コンテナ内で画像をドラッグ、拡大縮小、制限する機能が実現されます。同時に、画像もアスペクト比を維持し、中央に配置されます。
この記事が、JavaScript を使用してコンテナ内で画像をドラッグ、ズーム、制限する方法を理解するのに役立つことを願っています。ご質問がございましたら、お気軽にお問い合わせください。
以上がコンテナに限定され、アスペクト比と中央表示を維持しながら、画像のドラッグとズームをJavaScriptで実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Windows 11 上的显示缩放比例调整指南Sep 19, 2023 pm 06:45 PM在Windows11上的显示缩放方面，我们都有不同的偏好。有些人喜欢大图标，有些人喜欢小图标。但是，我们都同意拥有正确的缩放比例很重要。字体缩放不良或图像过度缩放可能是工作时真正的生产力杀手，因此您需要知道如何对其进行自定义以充分利用系统功能。自定义缩放的优点：对于难以阅读屏幕上的文本的人来说，这是一个有用的功能。它可以帮助您一次在屏幕上查看更多内容。您可以创建仅适用于某些监视器和应用程序的自定义扩展配置文件。可以帮助提高低端硬件的性能。它使您可以更好地控制屏幕上的内容。如何在Windows11
iPhone上的Safari缩小问题：这是修复程序Apr 20, 2024 am 08:08 AM如果您无法控制Safari中的缩放级别，完成工作可能会非常棘手。因此，如果Safari看起来被缩小了，那对您来说可能会有问题。您可以通过以下几种方法解决Safari中的这个缩小小问题。1.光标放大：在Safari菜单栏中选择“显示”>“放大光标”。这将使光标在屏幕上更加显眼，从而更容易控制。2.移动鼠标：这可能听起来很简单，但有时只需将鼠标移动到屏幕上的另一个位置，可能会自动恢复正常大小。3.使用键盘快捷键修复1–重置缩放级别您可以直接从Safari浏览器控制缩放级别。步骤1–当您在Safari
word缩放页面并排怎么操作Mar 19, 2024 pm 07:19 PM我们在使用word文档进行文件编辑的时候，有时候页面较多，我们想并排显示并整体查看效果如何，但是苦于不会操作，经常需要拉动好久逐页查看。不知道你有没有遇到过类似的情况，其实这时候我们只要学会word缩放页面并排的设置方法就可以轻松解决。下边，我们就一起看一看，学一学吧。首先，我们在Word文档中创建并打开一个新的页面，然后输入一些简单的内容，以便更容易区分。2、比如我们要实现word缩放并排显示，我们需要找到菜单栏【视图】，之后，在视图工具选项中选择【多页】，如下图所示：3、找到【多页】并点击，
Word文档编辑技巧：让两页内容变为一页Mar 25, 2024 pm 06:06 PM在微软Word文档中，常常会遇到将两页内容合并为一页的情况，特别是在需要节省纸张时，或者需要打印双面文档时。下面将介绍几种常用的方法来实现这一目标。方法一：调整页面边距首先打开Word文档，在菜单栏中找到“页面布局”选项，点击后会弹出页面布局设置的菜单。在这里可以调整页面的边距，包括上下左右的边距。一般来说，将上下边距调小一点可以让内容在一页内显示。你可以尝
如何让excel表格整体放大缩小Mar 20, 2024 pm 05:16 PM计算机技术、网络技术、软件技术的发展，为办公自动化提供了远大的前景。我们现在办公操作的流程都可以走电子流程，大大的节省了运转的时间，excel表格是经常会用到的软件操作，有时候根据纸张或排版的问题，我们需要把excel表格整体进行放大或缩小的设置，有什么操作方法能够满足我们的需要的，一起看下边的课程吧。1、首先打开excel软件并输入相关的信息，如下图所示。 2、然后点击右下角图标左右移动后，加号方向可以进行放大减号方向可以缩小，如下图所示。 3、第二种方法也可以使用ctrl+鼠标滑轮也可以
如何使用Python对图片进行缩放和旋转Aug 17, 2023 pm 10:52 PM如何使用Python对图片进行缩放和旋转导语：如今，我们经常使用图片来丰富我们的网页设计、移动应用、社交媒体等各种场景。在图片处理中，缩放和旋转是两个常见的需求。Python作为一种脚本语言和强大的图像处理工具，提供了许多库和方法来处理这些任务。本文将介绍如何使用Python对图片进行缩放和旋转，并提供代码示例。一、缩放图片缩放图片是调整图像大小的基本操作之
JavaScript 如何实现图片的上下滑动切换效果同时加入缩放和淡入淡出动画？Oct 20, 2023 pm 05:15 PMJavaScript如何实现图片的上下滑动切换效果同时加入缩放和淡入淡出动画？在网页设计中，常常会用到图片的切换效果来提升用户体验。而在这些切换效果中，上下滑动、缩放和淡入淡出动画是比较常见且具有吸引力的。本文将介绍如何使用JavaScript实现这三种动画效果的结合。首先，我们需要用HTML来构建一个基本的网页结构，其中包含要显示的图片元素。以下是一个示
JavaScript 如何实现图片的拖动缩放同时限制在容器内？Oct 20, 2023 pm 04:19 PMJavaScript如何实现图片的拖动缩放同时限制在容器内？在Web开发中，经常会遇到需要对图片进行拖动和缩放的需求。这篇文章将介绍如何使用JavaScript实现图片的拖动缩放，并限制在容器内的操作。一、拖动图片要实现图片的拖动，我们可以使用鼠标事件来跟踪鼠标位置，并将图片的位置随之移动。下面是一个示例代码：//获取图片元素varimage
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
