js设置图片放大缩小拖动

效果:

 思路: 在外层box进行相对定位relative,img设置绝对定位absolute;通过监听滚轮事件(wheel),设置样式缩放中心点(transformOrigin)和缩放转换(transform);获取到图片大小和位置,设置对应图片宽度高度和top、left偏移;鼠标按下事件(mousedown)和鼠标移动事件(onmousemove),得出图片移动偏移量。

详细代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>图片拖拽与缩放</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    img {
      position: absolute;
      top: 200px;
      left: 500px;
      width: 800px;
    }
  </style>
</head>

<body>
  <div class

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/139565.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI机器人软件定制流程

一、项目概述 AI机器人软件定制流程是根据客户的需求&#xff0c;定制开发一款具有人工智能功能的机器人软件。本方案将详细介绍AI机器人软件定制的整个流程&#xff0c;包括需求分析、设计、开发、测试和交付等环节。 二、需求分析 在定制AI机器人软件之前&#xff0c;需要…

pmp考试是智商税吗,是一场持久的割韭菜战吗?

考试只是考试&#xff0c;是不是智商税要看人&#xff0c;跟风考&#xff0c;考了不用&#xff0c;那真的就是智商税&#xff0c;被割韭菜。 那么&#xff0c;什么人适合考PMP&#xff1f; 1、有项目管理实践经验的人&#xff1a;PMP是基于项目管理实践经验的认证考试&#x…

Python数据结构:元组(Tuple)详解

1.介绍和基础操作 Python中的元组&#xff08;Tuple&#xff09;是不可变有序序列&#xff0c;可以容纳任意数据类型&#xff08;包括数字、字符串、布尔型、列表、字典等&#xff09;的元素&#xff0c;通常用圆括号() 包裹。与列表&#xff08;List&#xff09;类似&#xff…

Python实现猎人猎物优化算法(HPO)优化XGBoost回归模型(XGBRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…

论文导读 | 图流的分割和摘要

前 言 本次论文导读介绍有关图流的分割和摘要问题的3篇文章。第1篇是partition的&#xff0c;第2篇是summarization的。 首先介绍第一篇文章。 文章一&#xff1a;图分割在分布式系统中有广泛的应用 文章的问题定义是用划分边的方式来分割图。如图所示&#xff0c;把图&#…

群晖Docker(Container Manager)中安装Home Assistant Container

群晖Docker&#xff08;Container Manager&#xff09;中安装Home Assistant Container 不要使用 套件里面的 Home Assistant&#xff0c;不利于后期拓展 方式一&#xff1a; docker run -d --name"home-assistant-1" -v /volume1/docker/homeassistant/config:/c…

互联网医院牌照|互联网医院牌照办理小知识

随着互联网技术的快速发展&#xff0c;互联网医院牌照已经成为医疗行业的一个重要资质&#xff0c;我们致力于为您提供最优质的服务&#xff0c;帮助您的公司或产品顺利获得此牌照。 一、产品特性描述 1、专业性&#xff1a;我们的团队由经验丰富的顾问组成&#xff0c;对互联…

Apipost IDEA插件如何使用

Apipost-Helper是由Apipost推出的IDEA插件&#xff0c;写完接口可以进行快速调试&#xff0c;且支持搜索接口、根据method跳转接口&#xff0c;还支持生成标准的API文档&#xff0c;注意&#xff1a;这些操作都可以在代码编辑器内独立完成&#xff0c;非常好用&#xff01;这里…

leetcode每日一题复盘(11.13~11.19)

leetcode 435 无重叠区间 本题和射气球最小箭数大同小异&#xff0c;但是这一题没做出来&#xff0c;难就难在题目如何理解:移除区间最小数量&#xff0c;使剩下的区间不重叠 那么本质上就是求最少有多少个重叠区间&#xff0c;把重叠区间去掉剩下的区间即不重叠 这里有两种做…

完全免费!超好用的IDEA插件推荐:Apipost-Helper

Idea 是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它可以帮助开发人员更加高效地编写、调试和部署软件应用程序,Idea 还具有许多插件和扩展&#xff0c;可以根据开发人员的需要进行定制和扩展&#xff0c;从而提高开发效率,今天我们就来介绍一款国产的…

学用 DevChat 的 VSCode 插件,体验AI智能编程工具 (一)

简单说DevChat是一个辅助编程的智能工具&#xff0c;它可以通过自然语言对话的方式与开发者进行交流&#xff0c;帮助开发者更高效地完成编程任务。 有了人工智能工具&#xff0c;编程进入一个新天地。 闻名已久&#xff0c;不若体验一下。 一.准备工作 1.运行环境. A. p…

在Gradio实现两个下拉框进行联动案例解读:change/click/input实践(三)

本文的代码来自ChuanhuChatGPT&#xff0c;通过拆解写得比较好的gradio项目&#xff0c;可以更快理解gradio的一些使用。 ChuanhuChatGPT整体页面效果是比较合理的&#xff1a; 1 下拉框联动效果的解读 本篇是将一个其中【对话】中的【Prompt加载】小模块抽取出来并稍稍修改…

TCP/IP卷一详解第二章Internet地址结构概要

在这一章中介绍了Internet中使用的网络层地址&#xff08;也就是IP地址&#xff09;&#xff0c;还有如何为Internet中的设备分配地址&#xff0c;以及各种类型的地址等等…… 一、IP地址的表示 为大家所常见的有IPV4地址和IPV6地址&#xff0c;但在IPV4地址中&#xff0c;通…

JOSEF约瑟 电压继电器 DY-32/60C 板前接线 可订做导轨安装

DY-32/60C&#xff0c;DY-34/60C电磁式过电压继电器&#xff0c;用于继电保护线路中&#xff0c;作为过电压保护或低电压闭锁的动作元件。 系列型号 DY-32电压继电器&#xff1b; DY-36电压继电器&#xff1b; DY-33电压继电器&#xff1b; DY-37电压继电器&#xff1b; DY-34…

轻盈创新,气膜体育馆

气膜体育馆采用高强度、高柔性的薄膜材料为主要构建元素。其制作过程包括将膜材的外沿固定在地面基础或屋顶结构周边&#xff0c;并搭配智能化的机电设备&#xff0c;通过吹气实现室内空间的密闭。利用密闭空间内的气压支撑原理&#xff0c;当室内气压大于外部气压时&#xff0…

Minecraft开服教程:使用MCSM面板一键搭建我的世界服务器并实现远程联机

文章目录 前言1.Mcsmanager安装2.创建Minecraft服务器3.本地测试联机4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射内网端口 5.远程联机测试6. 配置固定远程联机端口地址6.1 保留一个固定TCP地址6.2 配置固定TCP地址 7. 使用固定公网地址远程联机 前言 MCSManager是一个…

期中成绩这样发

数字化时代&#xff0c;成绩查询系统已经成为学校里不可或缺的一部分。老师们需要一种方便、快捷、准确的方式来发布和查询成绩&#xff0c;而学生们则需要一种安全、可靠的方式来获取自己的成绩。那么&#xff0c;如何实现这一目标呢&#xff1f;我来给大家介绍几种简单实用的…

vue2【计算属性】

目录 1&#xff1a;计算属性的作用 2&#xff1a;代码示例 3&#xff1a;特点 4&#xff1a;好处 1&#xff1a;计算属性的作用 计算属性指的是通过将属性经过运算&#xff0c;最终得到一个属性值&#xff0c;这个属性值可以在method节点下和模板结构中被使用。 2&#x…

Jenkins 搭建

GitLab GitLab安装 https://gitlab.cn/install/?versionce CentOS 下安装 1. 安装和配置必须的依赖项 在 CentOS 7上&#xff0c;下面的命令也会在系统防火墙中打开 HTTP、HTTPS 和 SSH 访问。这是一个可选步骤&#xff0c;如果您打算仅从本地网络访问极狐GitLab&#xf…

Containerd接入Harbor仓库

在使用容器时&#xff0c;避免不了会使用到私有仓库&#xff0c;一般都是采用 harbor 作为私有仓库&#xff0c;docker 对接 harbor 仓库非常简单&#xff0c;哪 containerd 如何对接 harbor 呢&#xff1f; 在内网使用 harbor 根据个人习惯&#xff0c;一般都是非 http 并且是…