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解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 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的5个安全措施小结
2012/07/17 PHP
php开启openssl的方法
2014/05/15 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
小程序实现多选框功能
2018/10/30 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Python functools模块学习总结
2015/05/09 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
法律专业自我鉴定
2013/10/03 职场文书
上级检查欢迎词
2014/01/18 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
优秀大学生自荐信
2014/06/09 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
联谊活动总结范文
2015/05/09 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
python实现商品进销存管理系统
2022/05/30 Python