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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
vue+ts下对axios的封装实现
Feb 18 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 Static延迟静态绑定用法分析
2016/03/16 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
简单了解微信小程序的目录结构
2019/07/01 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
《大自然的语言》教学反思
2014/04/08 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
绿色环保倡议书
2015/04/28 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书