js模拟windows窗口效果，支持窗口放大，缩小，关闭，还原，或者在网页内任意地方拖拽 ...

最新推荐文章于 2023-04-12 14:07:01 发布
最新推荐文章于 2023-04-12 14:07:01 发布
阅读量484 收藏
点赞数
分类专栏： javascript css 文章标签： javascript html UI ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanggang_1997_2000/article/details/84371181
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js窗口拖拽（改变大小,最小化,最大化,还原,关闭）</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/lanrenzhijia.js"></script>
</head>
<body>
<div id="drag">
<div class="title">
<h2>这是一个可以拖动的窗口</h2>
<div>
<a class="min" href="javascript:;" title="最小化"></a>
<a class="max" href="javascript:;" title="最大化"></a>
<a class="revert" href="javascript:;" title="还原"></a>
<a class="close" href="javascript:;" title="关闭"></a>
</div>
</div>
<div class="resizeL"></div>
<div class="resizeT"></div>
<div class="resizeR"></div>
<div class="resizeB"></div>
<div class="resizeLT"></div>
<div class="resizeTR"></div>
<div class="resizeBR"></div>
<div class="resizeLB"></div>
<div class="content">
① 窗口可以拖动；<br />
② 窗口可以通过八个方向改变大小；<br />
③ 窗口可以最小化、最大化、还原、关闭；<br />
④ 限制窗口最小宽度/高度。
</div>
</div>
</body>
</html>
yanggang_1997_2000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
漂亮的JS视窗（仿Windows窗口）
12-31
非常精致、非常漂亮的仿Windows的JS视窗特效，很专业，用到你的网站中一定会增色不少。
第一个windows API窗口程序
xianyudewo的博客
09-23 581
步骤编写WinMain函数设计窗口类注册窗口类创建窗口显示并更新窗口编写消息循环编写窗口过程函数总结整体源码第一次写Windows窗口程序，第一次写博客，遇到很多问题。 编写WinMain函数 WinMian函数格式固定，可以直接粘贴复制 int WINAPI WinMain(HINSTANCE hInstance, //应用程序实例 HINSTANCE hPrevInstance, //上一个应用程序实例，不用 LPSTR lpCmdLine, //命令行参数 int nCmdShow //窗口显示
JS设置页面缩放显示
aphy358的博客
11-19 3853
设置页面缩放显示方法如下： // 获取当前窗口宽度和高度 var width = $(window.top).width(); var height = $(window.top).height(); // 按照原始尺寸320*480计算缩放值 var scaleX = width / 320; var scaleY = height / 480; // 设置整个文档
实现Mac窗口最小化动画效果
chase0128的博客
12-03 3489
前言 在学习opengl的过程中，经一前辈的教导，做出了一个比较有趣的东西：仿制Mac中窗口最小化的动画效果。因为是在我学习opengl的过程中制作的一个东西，所以实现的代码是使用是opengl来实现的，个人感觉思路也适用于其他的框架。实现的核心都在片元着色器中：对片元的uv坐标进行修改，从而模拟实现一个图片变形的整个过程。核心代码只有几句，刚做出来的时候自己也觉得太神奇了，所以希望把这个方法分享出来。 方法介绍 效果展示 首先给上一下最终做出来的一个效果吧~ 上面实例用到的只是一个简单的矩形加一张贴图，
JS网页图片查看器－可控制图片放大缩小移动｜兼容IE、FF
小宝
06-20 257
&lt;html&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;&lt;title&gt;JS网页图片查看器－可控制图片放大缩小还原移动效果&lt;/title&gt;&lt;META HTTP-EQUIV="imagetoolbar" CONTENT="no&
js模拟windows窗口效果，支持窗口放大，缩小，关闭，还原，或者在网页内任意地方拖拽
04-15
NULL 博文链接：https://147068307.iteye.com/blog/1752457
窗口拖拽效果.rar
02-10
vue实现窗口拖拽效果，主要使用鼠标按下、鼠标移动和鼠标抬起三个事件。并且限制鼠标移动位置不能超过页面可视区域。
网页实现任意放大、缩小、拖拽、移动drag+jquery+html.rar
05-29
利用drag+jquery+html在网页实现任意放大、缩小、拖拽、移动功能，可以利用此完善制作更广泛的应用场景。
StickerViewView的拖拽放大缩小.rar
07-30
StickerViewView的拖拽放大缩小.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
5.如何实现无标题窗口的拖动？（Visual C++编程 源代码）
06-26
5.如何实现无标题窗口的拖动？（5.如何实现无标题窗口的拖动？（Visual C++编程 源代码）5.如何实现无标题窗口的拖动？（Visual C++编程 源代码）5.如何实现无标题窗口的拖动？（Visual C++编程 源代码）5.如何实现...
js仿win10桌面弹出窗口提示特效代码
03-20
js仿win10桌面弹出窗口提示代码是一款windows10桌面弹出窗口通知，右下角弹出浮动窗口提示代码。
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
10-23
主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下
使用ECharts画K线图
weixin_34378922的博客
08-17 590
需引入echarts.js插件，开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。下载地址http://echarts.baidu.com/download.html 下面是代码，注释很清楚，主要是js代码，可根据项目进行增删！配置项说明：http://echarts.baidu.com/option.html#title <!DOCTYPE html> &l...
还原压缩过的JS代码
热门推荐
杯中酒是旧时愁的博客
11-21 1万+
有时不免会碰到的JavaScript代码被压缩为.min.js格式，难以阅读，比如： 其实想要还原这种代码很简单，只需要用谷歌浏览器，或者使用谷歌内核的浏览器，就可以将代码还原出来。 1.将代码在谷歌浏览器上运行起来 2.按F12键打开开发工具，点击Sources一栏 3.找到要还原的JS文件 4.点击开发工具最下边的{}就可以完成还原 5.还原后需要将代码复制出去，然后新建一个JS文件粘贴进去保存。浏览器不会改变原文件的格式。 ...
浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)
song_song0927的博客
04-12 3325
js控制页面随浏览器放大缩小,页面布局不变,按住ctrl,滑动滚轮放大浏览器百分比时,页面放大至左上角,缩小百分比时,页面缩小至中间
【JavaScript 进阶教程】案例一：使用面向对象模拟浏览器顶部切换栏
weixin_52212950的博客
06-20 3256
我们已经学会了很多 Tab 栏的写法，原生 JS 的写法，jQuery 的写法等等，学了面向对象后，我们就要学会用面向对象来实现我们 ES6 的第一个小案例------面向对象 Tab 切换栏，其中和以往不同的是，增加了添加 tab 栏，双击修改 Tab 栏等功能，其实它更像我们浏览器网页的顶部选项卡。...............
JS实现窗口拖拽
雾里看花叹朦胧
04-09 304
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> .draggable{ width: 300px; ...
js利用tab键切换当前页面_JavaScript跳转到指定页面并且到指定的tab切换窗口
weixin_39620629的博客
12-20 1520
JavaScript跳转到指定页面并且到指定的tab切换窗口案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面，再点击B页面的按钮跳转到A页面的第二个窗口，这个实现的效果有三种方法，下面的图片案例：A页面的第一个切换窗口B页面的跳转按钮A页面的第二个切换窗口第一方法用函数function；A页面按钮aaaaaB页面按钮代码：function submit_success() {var o...
js控制浏览器放大或者缩小
weiguoqiang748的博客
02-12 3331
问题一： 希望改变当前页面所在的浏览器窗口的大小 解决方案： 使用window对象的方法：resizeTo()和resizeBy()。比如: window.resizeTo(800, 600); // 将窗口大小调整为宽800，高600，单位为像素 window.resizeBy(50, 50); // 调整窗口大小，在当前基础上，宽和高各增加50...
js实现拖动窗口放大缩小
最新发布
06-03
实现拖动窗口放大缩小功能，需要借助一些第三方库或框架，比如jQuery UI或者React等。以下是一个基于jQuery UI的实现方法： 1. 引入jQuery和jQuery UI库： ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> ``` 2. 在HTML中定义一个可拖动的元素，并设置其初始大小： ``` <div id="draggable" style="width: 400px; height: 300px;"> <!-- 窗口内容 --> </div> ``` 3. 在JavaScript中使用jQuery UI的resizable和draggable方法，实现拖动和缩放功能： ``` $(function() { // 可拖动 $("#draggable").draggable(); // 可缩放 $("#draggable").resizable({ // 缩放时保持宽高比例 aspectRatio: true }); }); ``` 4. 可以为窗口添加一些样式，比如边框、标题栏等： ``` #draggable { position: absolute; border: 1px solid #ccc; padding: 10px; background: #fff; } .ui-resizable-handle { position: absolute; width: 10px; height: 10px; background: #ccc; } .ui-resizable-se { bottom: -5px; right: -5px; } ``` 以上代码实现了一个可拖动、可缩放的窗口，用户可以通过拖动边框或者角落来改变窗口的大小，并且保持宽高比例不变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值