js 拉动动态改变窗口大小

「爱情、让人受尽委屈。」 2022-09-11 02:29 350阅读 0赞

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

\#panel \{

position: absolute;

width: 200px;

height: 200px;

background: green;

\}

\#dragIcon \{

position: absolute;

top: 0;

right: 0;

width: 20px;

height: 20px;

background: yellow;

cursor: pointer;

\}

</style>

<script>

window.onload = function () \{

// 1. 获取两个大小div

var oPanel = document.getElementById('panel');

var oDragIcon = document.getElementById('dragIcon');

// 定义4个变量

var disX = 0;//鼠标按下时光标的X值

var disY = 0;//鼠标按下时光标的Y值

var disW = 0; //拖拽前div的宽

var disH = 0; // 拖拽前div的高

//3. 给小div加点击事件

oDragIcon.onmousedown = function (ev) \{

var ev = ev || window.event;

disX = ev.clientX; // 获取鼠标按下时光标x的值

disY = ev.clientY; // 获取鼠标按下时光标Y的值

disW = oPanel.offsetWidth; // 获取拖拽前div的宽

disH = oPanel.offsetHeight; // 获取拖拽前div的高

document.onmousemove = function (ev) \{

var ev = ev || window.event;

//拖拽时为了对宽和高 限制一下范围，定义两个变量

var W = ev.clientX - disX + disW;

var H = ev.clientY - disY + disH;

if (W < 100) \{

W = 100;

\}

if (W > 1800) \{

W = 1800;

\}

if (H < 100) \{

H = 100;

\}

if (H > 1000) \{

H = 1000;

\}

oPanel.style.width = W + 'px';// 拖拽后物体的宽

oPanel.style.height = H + 'px';// 拖拽后物体的高

\}

document.onmouseup = function () \{

document.onmousemove = null;

document.onmouseup = null;

\}

\}

\}

</script>

<body>

<div id="panel">

<div id="dragIcon"></div>

</div>

</body>

</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关根据窗口的大小，自动改变字体大小，使用rem。

1.320尺寸 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

悠悠/ 2023年06月24日 04:57/ 0 赞/ 22 阅读

相关禁止MFC改变窗口大小

最简单的方法方法1：不需要写任何代码禁止MFC改变窗口大小，只需要修改对话框外观的Border属性为Dialog Frame。方法2：代码实现：禁止窗口

小咪咪/ 2023年02月25日 08:33/ 0 赞/ 24 阅读

相关 android播放窗口大小,android surfaceview 如何改变视频窗口大小

![7c59517e09518f428af3d0bf84b15630.png][] androidsurfaceview 怎么改变视频窗口大小？我写了一个类继承surfac

妖狐艹你老母/ 2022年10月14日 01:13/ 0 赞/ 181 阅读

相关 ionic之动态改变icon大小

说明 ionic 的 icon本质上是一种字体，因此可以使用font-size对其进行大小修改 <button class="ion-android-arrow

矫情吗；*/ 2022年09月24日 13:25/ 0 赞/ 200 阅读

相关 js 拉动动态改变窗口大小

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq

「爱情、让人受尽委屈。」/ 2022年09月11日 02:29/ 0 赞/ 351 阅读

相关 js 动态改变窗口大小

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq

我会带着你远行/ 2022年09月11日 02:28/ 0 赞/ 209 阅读

相关 js实现div动态改变大小

网上看到的相关代码，记下，以备日后使用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

痛定思痛。/ 2022年08月20日 06:09/ 0 赞/ 373 阅读

相关 js浏览器窗口大小改变时事件

设置一个宽高根据当前窗口自适应的div，当页面大小发生改变时，div的宽高也随之发生改变： <div id="homePage_svcSuccessData" cla

缺乏、安全感/ 2022年08月18日 11:49/ 0 赞/ 219 阅读

相关 Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小

文章目录一、目标原型 1. 目标 2. 原型设计 3. 原型初步实现

╰+攻爆jí腚メ/ 2022年01月21日 08:27/ 0 赞/ 4192 阅读

相关 MFC_改变窗口大小，随着鼠标的拖动改变

今天在做一个视频播放器的时候，需要用到不同电脑之间分辨率的不同，让其根据当前电脑的分辨率显示其大小首先假设这个对话框类为CMyDialog。这篇文章转载了：http

电玩女神/ 2021年11月26日 23:31/ 0 赞/ 457 阅读