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 10 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
vue路由的配置和页面切换详解
Sep 09 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无限分类(树形类)的深入分析
2013/06/02 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
wxpython实现图书管理系统
2018/03/12 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python魔法方法详解
2019/02/13 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
什么是python的必选参数
2020/06/21 Python
python里glob模块知识点总结
2021/01/05 Python
python中最小二乘法详细讲解
2021/02/19 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
Java中实现多态的机制
2015/08/09 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Python函数中的不定长参数相关知识总结
2021/06/24 Python
MySQL自定义函数及触发器
2022/08/05 MySQL