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 相关文章推荐
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
JavaScript实现滑块验证解锁
Jan 07 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动态图像的创建
2006/10/09 PHP
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php实现无限级分类
2014/12/24 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
非常好的js代码
2006/06/27 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
vue 组件简介
2020/07/31 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
Python对象与引用的介绍
2019/01/24 Python
python实现图片压缩代码实例
2019/08/12 Python
python3字符串输出常见面试题总结
2020/12/01 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
贷款担保书范文
2014/05/13 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang