📄 dom2-test-banner.htm

📁 ASP.NET Web Forms Techniques
💻 HTM
字号:
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Welcome to the Xrox Car Company</title>

  <script language="JavaScript">
  <!--
  //--- Version for IE 4.0 and higher, Netscape 6.0 and ---
  //--- higher, Mozilla 6.0 and higher, plus Opera 6.0. ---
  //--- Uses W3CDOM Level2 + CSS methods and properties ---
  // declare the global variables
  var objTimer;      // reference to window.setInterval timer
  var objCar;          // reference to old car image
  var objHead;         // reference to Xrox Car Co banner image
  var bLoaded;       // flag to show if images are finished loading
  var bSwapped;      // flag to show we've swapped to the 2nd car image
  var iWindowWidth;  // width of client window

  function startAnimation() {
    window.status = 'Welcome to the Xrox Car Company';
    objCar = document.getElementById('CarImg');
    iCarLeft = - 150;
    objHead = document.getElementById('HeadImg');
    iHeadLeft = -520;
    bSwapped = false;  // using first car image
    // need width of page to detect car reaching right-hand side
    // table holding contents of page is sized to 100% of page width
    // use this except in Navigator 4 where we have to use the
    // innerWidth property of the window instead:
    if (document.all)
      iWindowWidth = document.getElementById('tblBack').style.pixelWidth
    else
      iWindowWidth = window.innerWidth;
    // start the interval timer
    objTimer = window.setInterval('moveImages()', 10);
  }
  function moveImages() {
    // make the images visible, they're off screen
    objCar.style.visibility = 'visible';
    objHead.style.visibility = 'visible';
    if (iCarLeft > iWindowWidth - 135) {
      // car has got to right hand end
      window.clearInterval(objTimer);       // so stop timer
      objCar.style.visibility = 'hidden';   // and hide it
      window.status = 'Select a car for more information';
      // display the slogan image
      document.getElementById('Force').style.visibility = 'visible';
    }
    else {
      // move the images
      iCarLeft += 1;
      objCar.style.left = iCarLeft;
      if (iHeadLeft < 10) {
        iHeadLeft += 1;
        objHead.style.left = iHeadLeft;
      }
      else {
         if (! bSwapped) {
           // swap to the second car image (no towrope)
           objCar.src = document.getElementById('CarImg2').src;
           bSwapped = true;
         }
      }
    }
  }
  //-->
  </script>

<body leftmargin="0" rightmargin="0" topmargin="0" onload="startAnimation()">

<table id="tblBack" background="images/bgmain.gif" style="width:100%"
       width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>
<tr><td nowrap="nowrap">

  <img src="images/bgsizer.gif" width="1px" height="83px" alt="" />
  <img id="CarImg" src="images/animtow1.gif" width="134px" height="61px" alt=""
       style="visibility:hidden; position:absolute; display:block; left:0px; top:8px" />
  <img id="CarImg2" src="images/animtow2.gif" width="134px" height="61px" alt=""
       style="visibility:hidden; position:absolute; display:block; left:0px; top:8px" />
  <img id="HeadImg" src="images/wccheader.gif" width="370px" height="61px" alt="Xrox Car Company"
       style="visibility:hidden; position:absolute; display:block; left:0px; top:8px" />
  <img id="Force" src="images/force.gif" width="200px" height="40px" alt="The Driving Force"
       style="visibility:hidden; position:absolute; display:block; left:420px; top:15px" />

</td></tr>
</tbody>
</table>

</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -