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 相关文章推荐
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
Vue.js暴露方法给WebView的使用操作
Sep 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调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php简单判断文本编码的方法
2015/07/30 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
django实现分页的方法
2015/05/26 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
项目总经理岗位职责
2014/02/14 职场文书
社区戒毒工作方案
2014/06/04 职场文书
离职感谢信
2015/01/21 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
辛亥革命观后感
2015/06/02 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技