JavaScript Window窗口对象属性和使用方法(3)

属性 说明
width   整个屏幕的水平尺寸  
height   整个屏幕的垂直尺寸  
pixelDepth   显示器每个像素的位数  
colorDepth   返回当前颜色设置所用的位数,1代表黑白;8代表256色(256种颜色);16代表增强色(大概64000种颜色);24/32代表真彩色(1600万种颜色)  
availWidth   返回窗口内容区域的水平尺寸  
availHeight   返回川康内容区域的垂直尺寸  

2、窗口滚动

利用Window对象的scroll()方法可以指定窗口的当前位置,从而实现窗口的滚动效果,语法如下:

window.scroll(x,y); //滚动到指定的绝对位置,相对文档的左上角 window.scrollTo(x,y); //同上 window.scrollBy(x,y); /*可以将文档滚动到相对位置,如果参数x为正数,向右滚动,否则向左;如果参数y为正数向下滚动,否则向上*/

比如选择一张我们的女神江疏影把图片拉大,然后写脚本:

<img src="https://www.jb51.net/article/1.jpg"> <script> var pos = 0; function scroller() { pos++; scrollTo(0,pos); clearTimeout(timer); var timer = setTimeout("scroller()",10); } scroller();

效果如下:(太美啦!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)

在这里插入图片描述

3、改变窗口大小

实现将当前窗口改变为指定的大小(x,y),当x,y>0为扩大,反之为缩小,语法如下:

window.resizeBy(x,y);

例子:动态改变窗口大小

代码如下:

<script> var winheight,winsize,x; function openwin() { winheight=100; winsize=100; x=5; win2 = window.open("new.html","","scrollbars='no'"); win2.moveTo(0,0); win2.resizeTo(100,100); resize(); } function resize() { if(winheight>=screen.availHeight-3) x=0; win2.resizeBy(5,x); winheight+=5; winsize+=5; if(winsize>=screen.width-5){ winheight=100; winsize=100; return; } setTimeout("resize()",50); } </script> <a href="javascript:openwin()" >打开一个自动改变大小的窗口</a>

效果如下:

在这里插入图片描述

4、访问窗口历史

利用history对象实现访问窗口历史,history对象是一个只读URL字符串数组,主要存储一个最近访问网页的URL地址列表。语法如下:

[window.]history.property|method([parameters])

history对象常用属性:

属性 说明
length   历史列表的长度,用于判断列表中的入口数目  
current   当前文档的URL  
next   历史列表的下一个URL  
previous   历史列表的前一个URL  

常用方法:

方法 说明
back()   退回前一页  
forward()   重新进入下一页  
go()   进入指定网页  

比如使用history对象中的back()和forward()方法来引导跳转:

<a href="javascript:window.history.forward();" >forward</a> <a href="javascript:window.history.back()" >back</a>

使用history.go()方法指定要访问的历史记录,如果参数为正数向前移动,否则向后移动

<a href="javascript:window.history.go(-1)" >向后退一次</a> <a href="javascript:window.history.go(2)" >向前进两次</a>

length属性访问history数组的长度,通过它可以很快访问末尾:

<a href="javascript:window.history.go(window.history.length-1)" >末尾</a>

5、设置超时

为一个窗口设置在某段时间后执行何种操作,称为设置超时

window对象的setTimeout()方法用于设一个超时,语法如下:

timerId = setTimeout(要执行的代码,以毫秒为单位时间)

还可以使用clearTimeout()来中止该超时设置,语法格式如下:

clearTimeout(timerId);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3f9c9dae8b031b38fd6ffaaaf74feab2.html