JavaScript操縱視窗的方法小結

來源:互聯網
上載者:User

在前面的介紹中,我們討論過close()方法:

複製代碼 代碼如下:  win = window.open("http://www.jb51.net/", "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”按鈕,就將執行下面

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.