https://blog.csdn.net/iteye_21064/article/details/81496640

用JS实现移动的窗口

2007年09月06日 23:23:00

阅读数：3
很简单的，关键的我用红色标注了：
<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 -  && x == width- 300){ && x > 0){
x--;
}else if(x == 0 && y > 0){
y--;
}
}
function end()
{
window.clearInterval(timer);
}

</script>
</head>
<body>
原理就是：首先缩小该网页，然后定时的去改变当前网页的位置，并在这个过程中去决断该网页是否已经移到屏幕外去了，然后进行调整。
<div >
<h3>可以移动的窗口</h3>
<hr>
<input type="button" value="开始" onclick="begin()">
<input type="button" value="停止" onclick="end()">
</div>
</body>
</html><iframe width=0 height=0></iframe>

用JS实现移动的窗口的更多相关文章

  1. js关闭当前页面(窗口)的几种方式总结(转)

    js关闭当前页面(窗口)的几种方式总结     1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...

  2. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  3. js如何弹出新窗口

    js如何弹出新窗口 时间:2012-4-22 弹出新窗口也是在网页设计中会经常用到的,其用法也很简单,是通过调用javascript的内置函数windows.open来产生的.  window.ope ...

  4. JS弹出模态窗口下拉列表特效

    效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...

  5. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  6. JS实现悬浮移动窗口(悬浮广告)的特效

    页面加载完成之后向页面插入窗口,之后向窗口插入关闭按钮,使用setInterval()函数触发moves()函数开始动画   js方法: 复制代码代码如下: <!DOCTYPE HTML PUB ...

  7. jquery-通过js编写弹出窗口

    本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. js控制全屏窗口

    <script src="__PUBLIC__/Js/jquery.min.js"></script> <script type="text ...

  9. js window.open() 父窗口与子窗口的互相调用(未必有用)

    javascript 父窗口与子窗口的互相调用 <html> <head></head> <body> 主要实现父子关系的页面 window.opene ...

随机推荐

  1. lnmp 中的laravel出现白屏的处理办法

    find / |grep fastcgi_params 其实是找fastcgi_params这个文件编辑 如果在知道目录的情况下也可以直接 vi /usr/local/nginx/conf/fastc ...

  2. LNMP 架构安装部署

    PHP 安装 LNMP 下 php 在 Apache 服务下是 libphp5.so nginx 服务下是 9000 端口 #确保 web 服务和 MySQL 正常 143 [root@oldboy ...

  3. initdb - 创建一个新的 PostgreSQL数据库集群

    SYNOPSIS initdb [ option...] --pgdata | -D directory DESCRIPTION 描述 initdb 创建一个新的 PostgreSQL 数据库集群. ...

  4. linux把用户添加到组

    使用 usermod 命令 将现有的用户添加到多个次要组或附加组 # usermod -a -G GroupName UserName id 命令查看输出 # id UserName 用户添加到多个次 ...

  5. 如何配置SQL Server数据库远程连接

    本地数据库(SQL Server 2012或以上) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1.首先是要打开 数据的配置管理工具 2.配置相关的客户端协议,开启TCP/IP 3.数据库 ...

  6. 【学习】025 RocketMQ

    RocketMQ概述 RocketMQ 是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能 ...

  7. python 文件夹压缩

    import os import zipfile def zipDir(dirpath,outFullName): """ 压缩指定文件夹 :param dirpath: ...

  8. pyqt-swf

    # pyqt5界面打开flash.swf文件 from PyQt5 import QtCore, QtGui, QAxContainer, QtWidgets class Ui_Flash(QAxCo ...

  9. kafka2.12_1.0.1生产者示范代码

    import java.util.Properties;import kafka.javaapi.producer.Producer;import kafka.producer.KeyedMessag ...

  10. Swagger+SpringBoot整理

    maven依赖 1 <dependency> 2 <groupId>io.springfox</groupId> 3 <artifactId>sprin ...