`

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

阅读更多
<!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>
分享到:
评论

相关推荐

    Jquery浮动窗口拖动放大缩小关闭效果

    "Jquery浮动窗口拖动放大缩小关闭效果"这个主题涉及了几个关键的jQuery功能,包括元素的定位、事件监听、动画效果以及用户交互的增强。 1. **浮动窗口**:浮动窗口通常指的是在网页上可以自由移动的弹出式窗口,如...

    js仿百度地图放大缩小拖拽查看效果

    在JavaScript编程领域,实现类似百度地图的交互效果是一项常见的需求,尤其在开发WebGIS应用时。这个项目专注于创建一个可拖拽、放大和缩小的地图功能,让我们深入了解一下这些技术细节。 首先,我们要明白地图的...

    Qt无边框窗口最大化时拖拽还原代码

    在Qt编程中,有时我们可能需要创建一个没有系统默认边框和标题栏的窗口,以实现自定义的界面效果。然而,这样的无边框窗口在最大化后,通常无法通过常规方式拖动来还原窗口大小。本篇文章将详细介绍如何通过重定义`...

    js百度地图放大缩小拖拽查看效果

    在JavaScript(js)编程中,实现百度地图的放大、缩小和拖拽查看功能是一项常见的需求。这涉及到对百度地图API的深入理解和应用。百度地图API是百度提供的一套用于开发地图应用的JavaScript库,它允许开发者在网页上...

    js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小js资源

    js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...

    网页实现任意放大、缩小、拖拽、移动drag+jquery+html.rar

    在网页开发中,实现元素的放大、缩小、拖拽和移动功能是常见的需求,这能够增强用户的交互体验,尤其在创建交互式应用或富媒体网站时。本项目通过结合使用drag(拖拽)、jQuery和HTML技术,提供了一种实现此类功能的...

    JS+Html图片放大缩小旋转拖动效果

    在JavaScript(JS)和HTML的结合使用中,可以创建丰富的用户体验,例如图片的放大、缩小、旋转和拖动查看功能。这些动态效果是现代网页设计中常见且实用的技术,能够增强用户与网页内容的交互性。下面将详细介绍如何...

    Qt窗体鼠标拖动放大缩小

    在Qt编程中,实现窗体的鼠标拖动放大缩小功能是一项常见的需求,尤其在开发具有交互性的图形用户界面(GUI)应用时。本教程将详细讲解如何利用Qt库中的信号和槽机制,以及鼠标事件来实现这一功能。 首先,我们需要...

    手把手教你打造c#透明、自定义边框、可拖动、可以放大缩小的窗口

    在C#编程中,开发一个具有透明效果、自定义边框、可拖动以及可以放大缩小的窗口是一项常见的任务,特别是在构建用户界面时。本文将深入讲解如何实现这些功能。 首先,我们需要创建一个新的Windows Forms应用程序...

    javascript图片预览(滚动放大缩小和拖动查看)

    在JavaScript编程中,图片预览是一项常见的功能,特别是在网页设计中。这个压缩包中的资源提供了一个实现滚动放大缩小和拖动查看图片的例子。下面将详细解释这个实现过程及其涉及的关键知识点。 首先,`test.html`...

    js窗口拖动效果

    在JavaScript编程中,实现窗口拖动效果是一项常见的需求,尤其在网页交互设计中。这个话题主要涉及以下几个核心知识点: 1. **DOM操作**:在JavaScript中,我们需要通过DOM(Document Object Model)来选取和操作...

    窗口拖拽(改变大小/最小化/最大化/还原/关闭)

    窗口拖拽功能,包括改变大小、最小化、最大化、还原和关闭,是用户界面的核心部分,提供了便捷的操作方式。这篇文章将深入探讨这些功能的实现原理,并提供相关的源码示例。 首先,窗口拖拽功能主要依赖于Windows ...

    4种JS图片放大缩小效果

    实现时,需要创建一个半透明的放大镜元素,通过JavaScript捕捉鼠标位置,动态调整放大镜内的图像源(src)和大小,使其与鼠标位置相对应,从而呈现出放大效果。 每种效果都需要良好的前端布局,包括图片的绝对或...

    js完美实现同时拖拽、旋转、放大缩小图片的手势操作

    使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能, 解决官网移动旋转复位效果, 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....

    仿win7界面弹出窗口放大缩小代码.zip

    该压缩包文件“仿win7界面弹出窗口放大缩小代码.zip”包含了一组JavaScript代码,其目的是实现一个类似于Windows 7操作系统中窗口交互效果的网页动态特效。这种特效主要体现在弹出窗口的打开、关闭以及缩放过程,...

    基于jQuery UI的模拟windows窗口插件

    2. **窗口操作**:用户可以对这些模拟的Windows窗口执行常见操作,例如拖动窗口位置、最大化窗口以占据整个屏幕、最小化窗口至任务栏,以及恢复窗口到原来的大小。 3. **Windows2000经典主题**:该插件特别提供了一...

    图片随意拖动放大缩小效果 javascript 代码

    本文将详细讲解如何使用JavaScript实现图片随意拖动和放大缩小的效果,这种效果常见于电商平台,如淘宝,使得用户可以更方便地查看商品细节。我们将通过分析给定的"实例27.图片随意拖动效果.html"文件中的代码来阐述...

    图片滚动、放大、缩小、还原、合适屏幕、拖动

    功能:图片滚动、放大、缩小、还原、合适屏幕 工程打开:打开test的组1进行测试 说明:里面有两个XP风格的滚动 使用方法: YHPicSize1.PICPath = "G:\1.jpg"'图片路径 YHPicSize1.PicName = "图片1"'图片名 Call ...

Global site tag (gtag.js) - Google Analytics