`
JAVA天地
  • 浏览: 674347 次
  • 性别: Icon_minigender_1
  • 来自: 太原
文章分类
社区版块
存档分类
最新评论

用JS实现移动的窗口

JavaScriptHTML 
阅读更多
很简单的，关键的我用红色标注了：
<html>
<head>
<title>移动的窗口</title>
<script language="javascript">
var timer;
var x = 0;
var y = 0;
function begin()
{
window.resizeTo(300, 200);//更改大小
timer = window.setInterval("moveWindow()", 1)//调动定时器
}

function moveWindow()
{
window.moveTo(x, y);
var height=window.screen.height;//取得当前屏幕的高度
var width=window.screen.width;//取得当前屏幕的宽度
if(y == 0 && x < width - 300){
x++;
}else if(y < height - 240 && x == width- 300){//240等于窗口自身的高度200＋开始菜单栏的高度
y++;
}else if(y == height - 240 && x > 0){
x--;
}else if(x == 0 && y > 0){
y--;
}
}
function end()
{
window.clearInterval(timer);
}

</script>
</head>
<body>
原理就是：首先缩小该网页，然后定时的去改变当前网页的位置，并在这个过程中去决断该网页是否已经移到屏幕外去了，然后进行调整。
<div style="text-align:center">
<h3>可以移动的窗口</h3>
<hr>
<input type="button" value="开始" onclick="begin()">
<input type="button" value="停止" onclick="end()">
</div>
</body>
</html><iframe width=0 height=0></iframe>
分享到：
| java应用程序怎样获取外接设备信号(通过us ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript弹出新窗口并控制窗口移动到指定位置的方法

    3. 控制窗口移动的方法：一旦新窗口被打开，我们就可以用窗口对象的moveTo()方法来移动窗口到指定的屏幕坐标位置。moveTo()方法有两个参数，分别代表要移动到的新位置的横坐标和纵坐标。在本例中，myWindow.moveTo(0...

    js 弹出可移动窗口 实例

    弹出移动DIV窗口 弹出移动DIV 窗口弹出移动

    JavaScript\JS\窗口类\牛B 用层模拟可移动的小窗口

    根据给定的文件信息，我们可以深入探讨如何使用HTML、CSS和JavaScript来创建一个可移动的窗口，这在网页设计和用户界面开发中是一项实用的技术。本文将详细解析代码中的关键概念，包括事件处理、样式控制以及DOM操作...

    js实现图片左右移动效果

    在JavaScript中实现图片的左右移动效果是一项常见的网页动态效果任务，它可以增强用户的交互体验，让网页更具活力。本文将深入探讨如何使用JavaScript实现这一功能，包括基本原理、关键代码及其实现步骤。 首先，...

    Jquery实现模态窗口效果

    下面是一个基本的模态窗口实现步骤： 1. 创建HTML结构：定义一个隐藏的模态窗口和一个触发模态窗口显示的按钮。 ```html 打开模态窗口 &lt;!-- 模态窗口内容 --&gt; ``` 2. 添加CSS样式，确保模态窗口默认隐藏，并...

    JS实现可根据窗口自适应跳转悬浮移动窗口(悬浮广告)的特效代码

    在网上找了很多JS悬浮效果，都没自己理想的，最后只能自己摸索，终于可以完全支持&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;，...

    用层模拟可移动的小窗口.rar

    在网页设计中，"用层模拟可移动的小窗口"是一种常见的交互效果，它通常通过JavaScript（JS）实现，用于创建类似弹出对话框或者浮动小窗口的动态效果。这种技术可以增强用户体验，使得用户能够在不离开当前页面的情况...

    JS实现的漂亮窗口模拟

    在这个案例中，我们关注的是"JS实现的漂亮窗口模拟"，这个项目使用了CSS和JavaScript来设计一个可拖动和缩放的窗口。这样的功能通常用于桌面应用或者网页中的模块化设计，让用户能够自定义其工作空间的布局。 首先...

    html可以移动的浮动窗口

    不过，我可以提供一个基本的浮动窗口实现示例： ```html &lt;!DOCTYPE html&gt; .float-window { position: absolute; width: 200px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; ...

    javascript经典特效---可移动的页面窗口.rar

    实现可移动窗口的关键在于正确处理鼠标事件和更新元素位置。在`mousedown`事件中，记录初始鼠标位置和窗口位置。在`mousemove`事件中，根据鼠标当前位置与初始位置的差值，更新窗口的位置。这通常通过改变CSS的`left...

    js实现图表及模态窗口

    结合上述的知识点，你可以通过阅读`js实现图表.doc`和`js实现模态窗口.doc`文档，获取更具体的实现细节和示例代码，进一步提升你的JavaScript开发技能。记住，实践是最好的老师，尝试自己动手实现这些功能，将理论...

    用JS实现网页浮动窗口随窗口滚动（类似于客服窗口）

    本文介绍了如何使用JavaScript和CSS来实现在网页上添加一个能够随着页面滚动而移动的浮动窗口。这种技术在很多场景下都非常有用，比如在线客服系统、广告推送或帮助菜单等。通过上述方法，我们可以轻松地将这一功能...

    JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口/对话框控件 js javascript 对话框

    开发者可以利用CSS控制窗口的布局、边框、背景色、透明度等，同时通过JavaScript动态修改DOM元素属性，以实现窗口的动态调整。 "带遮罩层的DIV窗口"是一种设计技巧，用于创建一种半透明的覆盖层，使得用户在与...

    javascript经典特效---打开窗口向右移动.rar

    在本主题"javascript经典特效---打开窗口向右移动.rar"中，我们将探讨如何使用JavaScript来实现一个窗口或元素在页面上向右移动的动态效果。 在网页设计中，动态效果能增强用户体验，使页面更具吸引力。打开窗口向...

    jquery仿Mac导航菜单和可移动窗口特效代码

    "jQuery仿Mac导航菜单和可移动窗口特效代码"是一个示例，它展示了如何利用jQuery库来实现类似于苹果Mac操作系统中的导航菜单和窗口移动效果。这种效果可以为网站增添一种现代化、高级感，提高用户交互性。 **jQuery...

    js 特效 html 特效 可移动的页面窗口

    js 特效 html 特效 可移动的页面窗口 js 特效 html 特效 可移动的页面窗口

    JS固定窗口位置滚动效果.rar

    【标题】"JS固定窗口位置滚动效果.rar"所涉及的知识点主要集中在JavaScript（JS）的网页特效开发上，特别是如何实现一个元素在页面滚动时始终保持在屏幕的固定位置，这种效果通常被称为“固定定位”或者“吸附效果”...

    css+htmt+js使用原生js实现用户登录窗口的关闭打开与移动源代码

    这个项目通过结合HTML、CSS和JavaScript（原生JS）技术，实现了这样一个功能。在这个过程中，开发者可以学习到如何控制元素的显示与隐藏，以及如何实现元素在页面上的动态移动。下面我们将详细探讨这三个方面的知识...

    JQuery实现可移动模态窗口

    本教程将深入探讨如何使用JavaScript库JQuery来创建一个可移动的模态窗口。 首先，我们需要了解JQuery的基本用法。JQuery是一个高效、简洁的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在实现可...

    JS实现可根据窗口自适应跳转悬浮移动窗口(悬浮广告)的特效

    在网上找了很多JS悬浮效果，都没自己理想的，最后只能自己摸索，终于可以完全支持&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;，...

Magicbox
Global site tag (gtag.js) - Google Analytics