JavaScript操纵窗口的方法小结


Posted in Javascript onJune 28, 2013

在前面的介绍中,我们讨论过close()方法:

win = window.open("https://3water.com/", "js");

win.close();

JavaScript提供了许多方法与属性,我们可以使用它们来控制窗口。

移动、滚动、改变大小

下面的方法(N4+,IE4+)负责个定窗口的移动、滚动以及大小改变操作:

// 移动窗口的屏幕位置到指定的偏移x 、y(绝对移动)

window.moveTo(iX, iY)

// 移动窗口的屏幕位置到指定的偏移x 、y(相对移动)

window.moveBy(iX, iY)

// 滚动窗口的屏幕位置到指定的偏移x 、y(绝对滚动)

window.scrollTo(iX, iY)

// 滚动窗口的屏幕位置到指定的偏移x 、y(相对滚动)

window.scrollBy(iX, iY)

// 改变窗口大小到指定的高度与宽度(绝对改变大小)

window.resizeTo(iWidth, iHeight)

// 改变窗口大小到指定的高度与宽度(相对改变大小)

window.resizeBy(iX, iY)

注意,这些方法都属于window对象,所以它们智能在当前窗口或者其他可以引用的窗口被执行。如果你想动态设置窗口的位置和尺寸,就可以在窗口创建后使用move和resize方法。

//form

注意,控制一个包含其他服务器页面的窗口是不可能的。

最大化窗口

我们现在来介绍如何制作一个点击后可最大化窗口的按钮。

下面看看有关这个按钮的HTML和JavaScript代码:

<SCRIPT LANGUAGE="JavaScript">

<!--

function maximizeWin() {

if (window.screen) {

var aw = screen.availWidth;

var ah = screen.availHeight;

window.moveTo(0, 0);

window.resizeTo(aw, ah);

}

}

// -->

</SCRIPT>

<FORM><INPUT TYPE="button" VALUE="Maximize" onClick="maximizeWin()"></FORM>

注意,resizeTo()方法引用整个窗口的尺寸。 //form

一个悬浮的广告

在网站上,通过移动广告窗口,能够吸引浏览者的注意力。我们可以通过调用下面的函数来实现让窗口左右移动的效果:

function makeAd() {

window.open("adpage.html", "ad", "width=468,innerWidth=468,height=80,innerHeight=80,left=0,top=0");

}

下面是页面adpage.html的代码:

<SCRIPT LANGUAGE="JavaScript">

<!--

function startAd() {

if (window.screen) {

pos = 0;

aw = screen.availWidth;

window.moveTo(pos, 0);

timerID = setInterval("moveAd()", 50);

}

}

function moveAd() {

if (pos <= 0) inc = 5;

// 5 - so it doesn't pass the right edge

// 10 - accounts for the window chrome

if (pos + 468 + 10 + 5 > aw) inc = -5;

pos += inc; a380fa.com

window.moveTo(pos, 0);

}

window.onload = startAd;

// -->

</SCRIPT>

当页面adpage.html装载后,函数startAD()被执行。如果用户的浏览器支持window.screen对象,窗口才能移动,因为我们需要使用window.screen来计算屏幕的宽度。窗口在屏幕的上边界滑动,从左上角(pos=0)一直到右上角。

通过内建的setInterval()函数,每隔50毫秒移动广告窗口5个象素。如果点击了“stop”按钮,就将执行下面

Javascript 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
Express.JS使用详解
Jul 17 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
javascript实现文字无缝滚动效果
Aug 26 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 #Javascript
js获取当前日期代码适用于网页头部
Jun 27 #Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 #Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 #Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 #Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 #Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
EsLint入门学习教程
2017/02/17 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python实现Dijkstra算法
2018/10/17 Python
tensorflow 查看梯度方式
2020/02/04 Python
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
手机银行营销方案
2014/03/14 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
国庆宣传标语
2014/06/30 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
售房协议书范本
2015/08/11 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
新入职员工工作总结
2015/10/15 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Python网络编程之ZeroMQ知识总结
2021/04/25 Python