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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
原生js实现轮播图
Feb 27 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
你准备好迎接vue3.0了吗
Apr 28 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python中return self的用法详解
2018/07/27 Python
python tornado修改log输出方式
2019/11/18 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
小学语文教学反思
2014/02/10 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
体育运动口号
2014/06/09 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
大学生实习介绍信
2015/05/05 职场文书
为自己工作观后感
2015/06/11 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Vue.Draggable实现交换位置
2022/04/07 Vue.js