GZICP.com   
 
    返回首页
    联系我们
 
 
     

JavaScript窗口功能——操纵窗口

www.gzicp.com   2005年1月9日 17:29:09
 

  一旦你得到了表示窗口的变量,你就能通过各种方法来操纵它。在前面的介绍中,我们讨论过close()方法:

  win = window.open("http://www.docjs.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方法。

  注意,控制一个包含其他服务器页面的窗口是不可能的。

最大化窗口
  我们现在来介绍如何制作一个点击后可最大化窗口的按钮。

  下面看看有关这个按钮的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()方法引用整个窗口的尺寸。

一个悬浮的广告
  在网站上,通过移动广告窗口,能够吸引浏览者的注意力。我们可以通过调用下面的函数来实现让窗口左右移动的效果:

  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;

   window.moveTo(pos, 0);

  }

  window.onload = startAd;

  // -->

  </SCRIPT>

  当页面adpage.html装载后,函数startAD()被执行。如果用户的浏览器支持window.screen对象,窗口才能移动,因为我们需要使用window.screen来计算屏幕的宽度。窗口在屏幕的上边界滑动,从左上角(pos=0)一直到右上角。

  通过内建的setInterval()函数,每隔50毫秒移动广告窗口5个象素。如果点击了“stop”按钮,就将执行下面的语句:

  clearInterval(timerID);

震动的窗口
  如你所见,move方法能帮助你吸引用户的注意力。如果你想让访问者更加震撼,你也许想加入下面的效果:

  <SCRIPT LANGUAGE="JavaScript1.2">

  <!--

  var quakeID = 0;

  var totalX = 0;

  var totalY = 0;

  // max pixels in each movement

  var maxShift = 10;

  // min movements in each quake

  var minJumps = 10;

  // max movements in each quake

  var maxJumps = 40;

  // min milliseconds between two quakes

  var minBetweenQuakes = 1000;

  // max milliseconds between two quakes

  var maxBetweenQuakes = 4000;

  function jump() { // -maxShift to maxShift

   with (Math)

    return (maxShift + 1 - ceil(random() * (maxShift * 2 + 1)));

  }

  function winShake() {

   for (var i = 0; i < (minJumps + (Math.random() * (maxJumps - minJumps))); i++) {

    dX = jump();

    dY = jump();

    window.moveBy(dX, dY);

    totalX -= dX;

    totalY -= dY;

   }

   window.moveBy(totalX, totalY);

   totalX = 0;

   totalY = 0;

   quakeID = setTimeout("winShake()", Math.ceil(Math.random() *

    (maxBetweenQuakes - minBetweenQuakes)) + minBetweenQuakes);

  }

  window.onload = winShake;

  //-->

  </SCRIPT>

  这段脚本程序产生一系列的地震效果。当页面被转载时(window.onload),就开始产生效果。

  jump()方法返回一个随机整数,范围从-maxShift到maxShift。下面的代码段负责一个单一震动:

  for (var i = 0; i < (minJumps + (Math.random() * (maxJumps - minJumps))); i++) {

   dX = jump();

   dY = jump();

   window.moveBy(dX, dY);

   totalX -= dX;

   totalY -= dY;

  }

  由于我们没有办法得知窗口的初始位置,我们就必须跟踪每一次位置调整后的尺寸。totalX和totalY变量中保持了窗口相对于初始位置的数值。当震动效果完毕后,窗口移动回到初始位置。

  window.moveBy(totalX, totalY);

  totalX = 0;

  totalY = 0;

  在一个任意位置暂停后,winShake()函数再次被调用:

  quakeID = setTimeout("winShake()", Math.ceil(Math.random() *

   (maxBetweenQuakes - minBetweenQuakes)) + minBetweenQuakes);
 

www.csdn.net 听风

相关文章
·JavaScript窗口功能——命名窗口和框架(2005年01月09日)
·JavaScript窗口功能——打开一个新窗口(2005年01月09日)
·JavaScript窗口功能——创建弹出窗口(2005年01月09日)
·JavaScript窗口功能——定制新窗口(2005年01月09日)
·JavaScript窗口功能——发挥窗口特征(2005年01月09日)
·JavaScript窗口功能——检查一个窗口是否存在(2005年01月09日)
·JavaScript窗口功能——关闭窗口(2005年01月09日)
·JavaScript窗口功能——操纵窗口(2005年01月09日)
·JavaScript窗口功能——在窗口中书写内容(2005年01月09日)
·JavaScript窗口功能——引用已打开的窗口(2005年01月09日)
·JavaScript窗口功能——创建对话框(2005年01月09日)
最新文章
·JavaScript窗口功能——命名窗口和框架  (2005年01月09日)
·JavaScript窗口功能——打开一个新窗口  (2005年01月09日)
·JavaScript窗口功能——创建弹出窗口  (2005年01月09日)
·JavaScript窗口功能——定制新窗口  (2005年01月09日)
·JavaScript窗口功能——发挥窗口特征  (2005年01月09日)
·JavaScript窗口功能——检查一个窗口是否存在  (2005年01月09日)
·JavaScript窗口功能——关闭窗口  (2005年01月09日)
·JavaScript窗口功能——操纵窗口  (2005年01月09日)
·JavaScript窗口功能——在窗口中书写内容  (2005年01月09日)
·JavaScript窗口功能——引用已打开的窗口  (2005年01月09日)
·JavaScript窗口功能——创建对话框  (2005年01月09日)





 
 
Copyright © 1999-2005 GZICP.com All Rights Reserved