js 拉动动态改变窗口大小

「爱情、让人受尽委屈。」 2022-09-11 02:29 313阅读 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 条评论，313人围观）

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

相关阅读

相关关于MFC禁止窗口最大化按钮和禁止改变窗口大小

1. 　　禁止窗口最大化等按钮　　修改PreCreateWindow()函数如下: 　　BOOL CWndMain::PreCreateWindow

迈不过友情╰/ 2023年10月18日 08:29/ 0 赞/ 47 阅读

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

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

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

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

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

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

相关 js 动态改变窗口大小

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

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

相关 js实现浏览器窗口大小被改变时触发事件的方法

window.onresize = function(){ let vw = document.body.clientWidth

淡淡的烟草味﹌/ 2022年09月09日 06:25/ 0 赞/ 298 阅读

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

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

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

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

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

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

相关 win32应用禁止改变窗口大小方法

一种简单的处理方法是在调用CreateWindow函数时指定的窗口样式中去掉`WS_THICKFRAME`样式。如果你使用的样式中已经包含该样式，例如`WS_OVERLA

短命女/ 2022年08月02日 01:25/ 0 赞/ 251 阅读

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

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

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

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

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

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