ªð¦^¦Cªí ¤W¤@¥DÃD µo©«

[±Ð¾Ç] (±Ð¾Ç²Ä33½g) Dynamic HTML ¤¤½g

[±Ð¾Ç] (±Ð¾Ç²Ä33½g) Dynamic HTML ¤¤½g

©T©w¤¸¥ó¦ì¸m
¦b¤W¤@¸`¤¤¡A¤p»x´£¥X¡upixelTop¡v»P¡upixelLeft¡vÄݩʪº´ú¶q³æ¦ì§@¬°¤¸¥óªº©w¦ì¡A¤j®a¥i¯àÁÙ¦³¨ÇºÃ´b¡A²{¦b¤p»x¦A¨Ó»¡©ú¤@¤U¡C

§Ú­Ì¤§©Ò¥H¨Ï¥ÎCSSªº¦ì¸m(position)»P¤j¤p(size) ÄݩʨӰµ¤¸¥ó±±¨î¡A¬O¦]¬°³o¨ÇÄÝ©Ê·|±N¤¸¥óªº¦ì¸m»P¤j¤p¼Æ¾Ú¤Æ¡AÅý§Ú­Ì¯à§ó®e©öÁA¸Ñ¤Î³B²z¡A¤£¹L¡A§Ú­Ì¤§«e©Ò¨Ï¥Î¹LªºCSSÄÝ©Ê¡A¦pwidth¡Bheight¡Btop¡Bleftµ¥¡A·í§Ú­Ì¨ú±o³o¨ÇÄݩʪº­È®É¡A¨ä©Ò¦^À³µ¹§Ú­Ìªº¸ê®Æ¬O¤@²Õ¼Æ­È¥[¤W¨ä³æ¦ì¡A¤]´N¬O»¡³o¨ÇÄݩʪº¦^¶Ç­È¬O¤@­Ó¦r¦ê²Õ¡A¨Ò¦p¦³¤@­Ó¤¸¥ó¥¦ªº¼e(width)¬O30ÂI(point)¡A¨º»ò§Ú­Ì©Ò±oªºÄݩʭȱN·|¬O¡u30pt¡v¡C

¥¿¦]¬°ÄÝ©Ê­È­Y¬O¤@­Ó¦r¦ê²Õ¡A±N·|¨Ï§Ú­Ì¦b°µ¹Bºâ©Î«ü©wÄÝ©Ê­È®ÉÅܪº«D±`Ãø¥H³B²z¡A¨Ò¦p¦b½d¨Ò13-4.htm¤¤¡A§Ú­Ì³z¹L¡uleft¡vÄݩʨӳ]©w¤¸¥óªº¦ì¸m®É¡A°£¤F³]©wÄݩʪº¼Æ­È¥~¡AÁÙ±o«ü©w¨ä³æ¦ì¬°¡upx¡v¡A©Ò¥H¤p»x¤~·|´£¥X¡upixelTop¡v»P¡upixelLeft¡vÄݩʨӨϥΡA³o¨âºØÄݩʳ£¬O¥H¡u¹³¯À¡v¬°´ú¶q³æ¦ì¡A¥¦­ÌªºÄݩʳ]©w»P¨ú±o³£¥u¬O¡u¼Æ­È¡v¡A¦]¦¹§Ú­Ì¦b§Q¥Î³o¨ÇÄÝ©Ê­È°µ¹Bºâ©Î³B²z´N»´ÃP¦h¤F¡F°£¤F¦ì¸mªº¡upixelTop¡v»P¡upixelLeft¡vÄÝ©Ê¥~¡A¤¸¥ó¼e«×¡B°ª«×¤]¦³¬°¹³¯À³æ¦ìªºÄÝ©Ê¡G¡upixelWidth¡v»P¡upixelHeight¡v¡C¦pªG¡uwidth¡vªº¦r¦êÄݩʭȬ°¡u30px¡v¡A¨º»ò¡upixelWidth¡vªºÄÝ©Ê­È´N¬O¤@²Õ¼Æ¾Ú¡u30¡v¡C

¤¸¥óªº¦ì¸m»P¤j¤pÁÙ¦³¤@ºØ¬O¥H¡uÂI¡]point¡^¡v¬°³æ¦ìªº¡A¦ý¬O¥¦­ÌªºÄݩʳ]©w»P¨ú±o¤]¬O¡u¼Æ­È¡v¡A³o¨ÇÄݩʬO¡uposTop¡v¡B¡uposLeft¡v¡B¡uposWidth¡v¡B¡uposHeight¡v¡C¦pªG¡uwidth¡vªº¦r¦êÄݩʭȬ°¡u30pt¡v¡A¨º»ò¡uposWidth¡vªºÄÝ©Ê­È´N¬O¤@²Õ¼Æ¾Ú¡u30¡v¡C
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

±²°Ê¶b¦ì¸m
·í§Ú­Ìªººô­¶¤å¥ó¶W¹LÂsÄý¾¹µøµ¡¥iÅã¥Ü½d³ò®É¡A´N·|¦bÂsÄý¾¹µøµ¡¥ª¤è¥X²{««ª½±²°Ê¶b¡A©Î¦bÂsÄý¾¹µøµ¡¤U¤è¥X²{¤ô¥­±²°Ê¶b¡A¥H«K§Ú­ÌÀ˵øºô­¶¤å¥óªº¤º®e¡G

13-8.png
2010-5-19 09:44


·í§Ú­Ì²¾°Ê±²°Ê¶b®É¡A·|¤Þµoonscroll¡]­¶­±±²°Ê¡^¨Æ¥ó¡A­n¦³onscroll¨Æ¥ó²£¥Í¡A·íµM±o­n¦³±²°Ê¶b¥i¥H¨Ï¥Î¤~¦æ¡I·í§Ú­Ì§Q¥Î±²°Ê¶b¥h§ïÅÜ­¶­±®É¡Aonscroll¨Æ¥ó´N·|µo¥Í¡A¦bµo¥Íonscroll¨Æ¥ó®É¡A§Ú­Ì¥i¥H¨Ì·Ó±²°Ê¶b·í®É©Ò¦bªº¦ì¸m¨Ó§ïÅܧڭ̤¸¥óªº¹ïÀ³¦ì¸m¡A±²°Ê¶bªº¦ì¸m¥Ñ¨â­ÓÄݩʨӱ±¨î»P°O¿ý¡A¤ô¥­¦ì¸m¬O¡uscrollLeft¡vÄÝ©Ê¡A¦Ó««ª½¦ì¸m«h¬O¡uscrollTop¡vÄÝ©Ê¡G

ÄÝ©Ê

§@¥Î

document.body.scrollTop

±²°Ê¶bªº««ª½¦ì¸m

document.body.scrollLeft

±²°Ê¶bªº¤ô¥­¦ì¸m



·í§Ú­Ì¨Ï¥Î±²°Ê¶b¨Ó§ïÅÜ­¶­±¡]±²°Êµøµ¡¡^®É¡Aºô­¶¤¸¥ó·|ÀHµÛ­¶­±§ïÅܦӬݤ£¨ì¤F¡A¤]´N¬O»¡¡G¤¸¥ó¤£·|ÀHµÛµøµ¡±²°Ê¡A§Ú­ÌµLªk±N¤¸¥óªº¦ì¸m©T©w¦bµøµ¡¤¤ªº¬Y­Ó¦a¤è¡A¥i¬O¦³¤@­Ó¬Y®a¥~°ê´£¨Ñ§K¶OªÅ¶¡ªº¤½¥qºô­¶¤¤¡A¦³­Ó¹Ï¤ù¬O·|ÀHµÛµøµ¡±²°Ê¡A¹Ï¤ù·|¤@ª½¥X²{¦bµe­±¤¤£«¡A¨S¿ù¡I³o¼Ëªº®ÄªG§Ú­Ì¤]¥i¥H»´©öªº°µ¨ì¡A¥u­n§Ú­Ì§Q¥Î±²°Ê¶bªº¦ì¸mÄÝ©Ê´N¥i¥H¿ì¨ì¡C
13-9.png
2010-5-19 09:51
  1. <HTML>
  2. <HEAD>
  3. </HEAD>
  4. <SCRIPT language="JavaScript">
  5. //Åܧ󤸥ó¦ì¸m¨ç¦¡
  6. function move()
  7. //§Q¥Î±²°Ê¶b¦ì¸m§ïÅܤ¸¥ó¦ì¸m
  8. {
  9. document.all.map.style.pixelLeft=document.body.scrollLeft
  10. document.all.map.style.pixelTop=document.body.scrollTop
  11. }

  12. </SCRIPT>
  13. <!--·íµøµ¡±²°Ê®É©I¥s¨ç¦¡Åܧ󤸥ó¦ì¸m-->
  14. <BODY onScroll="move()">

  15. <img src="test.gif" alt="´å²¾ªº¹Ï¤ù" id="map" style="position: absolute">

  16. </BODY>
  17. </HTML>
½Æ»s¥N½X

  • ¦b¥»¨Ò¤¤¡A§Ú­Ì±N¹Ï¤ù¦ì¸m©T©w¦bµøµ¡ªº¥ª¤W¨¤¡A·íÂsÄýªÌ§ïÅܺô­¶ªºÂsÄýµe­±¦ì¸m®É¡A¹Ï¤ùªº¦ì¸m±N·|¸òµÛ­«·sÅܧó¦ì¸m¡Cª`·N¨ìµ{¦¡½X²Ä17¦æ¡A·íºô­¶¤å¥óµo¥Í±²°Ê®É¡A§Ú­Ì´N©I¥smove()¨ç¦¡¨Ó­«·sÅܧó¹Ï¤ù¦ì¸m¡C
  • ·í§A¶}±Ò½d¨Ò®É·|µo²{¡A¨S¦³±²°Ê¶b¥i¥Î£«¡A¨º¬O¦]¬°ºô­¶¤¤°£¤F¹Ï¤ù¥~¡A¨S¦³¨ä¥Lªº¤º®e¡A¤@­Óµøµ¡­¶­±´N¨¬¥HÅã¥Ü¾ã­Óºô­¶¤å¥ó¡A©Ò¥H¨S¦³±²°Ê¶b¥X²{¡A­n¦bµøµ¡­¶­±¤£¨¬¥HÅã¥Ü¾ã­Óºô­¶¤å¥ó®É±²°Ê¶b¤~·|¥X²{¡A³o®É§A¤~¦³¿ìªk¬Ý¨ì¹Ï¤ù©w¦ìªº®ÄªG¡A²{¦b§A¥i¥H¶}±Ò½d¨Ò¡A¥[¤@¨Ç¬q¸¨½s¸¹¡A·|¦³±²°Ê¶b¥X²{¡A§A¥i¥H§ïÅܱ²°Ê¶b¦ì¸m¬Ý¬Ý®ÄªG¡I


13-10.png
2010-5-19 09:54
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

¤H®a¤£­n¯B°Êªº¹Ï¤ù¦b¥ª¤W¨¤°Õ¡I§Ú­n¥¦¦bµe­±ªº¥k¤U¨¤°Õ¡IOK¡A§Ú­Ì²{¦b´N±N¹Ï¤ù³]©w¦b¥k¤U¨¤¡C
¹ê¨Ò¾Ç²ß¡G
13-8.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE></TITLE>

  4. <SCRIPT Language="JavaScript">
  5. //³]©w¯B°Ê¹Ï¤ù¦ì¸m§ó·s³t«×
  6. changespeed = 20
  7. //¯B©w¹Ï¤ù¤ô¥­¦ì¸m³]©w  
  8. Xpos =100  
  9. //¯B©w¹Ï¤ù««ª½¦ì¸m³]©w
  10. Ypos =100

  11. //ªì©l­È³]©w
  12. function setinit()
  13. {
  14. posX = (document.body.clientWidth-Xpos)
  15. posY = (document.body.clientHeight-Ypos)
  16. }

  17. //±²°Ê¶b²¾°Ê®É§ó·s¹Ï¤ù¦ì¸m
  18. function Renew()
  19. {
  20. document.all.mymap.style.left = posX + (document.body.scrollLeft)
  21. document.all.mymap.style.top = posY + (document.body.scrollTop)
  22. }

  23. //¯S®Ä¥Dµ{¦¡°Ï
  24. function gomove()
  25. {
  26. setinit()
  27. window.onresize=setinit
  28. setInterval ("Renew()",changespeed)
  29. }
  30. </SCRIPT>
  31. </HEAD>
  32. <BODY>
  33. <!--¯B°Ê¹Ï¤ùªººô­¶±Ô­z-->
  34. <img src="test.gif" id="mymap" style="position:absolute">
  35. <!--©I¥sJava¯B°Êªí®æ¯S®Äªº±Ô­z-->
  36. <script language="JavaScript">
  37. <!--
  38. window.onload=gomove
  39. //-->
  40. </script>
  41. </BODY>
  42. </HTML>
½Æ»s¥N½X
­º¥ý§Ú­Ì¥ý©w¸q§A¹Ï¤ùªº¦ì¸m»P¡A­«·s­pºâ©w¦ì¹Ï¤ùªº®É¶¡¡Gµ{¦¡½X6¦Ü11¦æ¡]ºô­¶­ì©l½X¬õ¦â¼Ðµù¡^¡A©_©Ç¡H¡I¹Ï¤ùªº¤ô¥­¤Î««ª½¦ì¸m¥u¦³100­Ó³æ¦ì¶ZÂ÷¡H¨S¿ù°Õ¡I§Ú­Ì³o¦¸¬O±qµøµ¡ªº¥k¤U¨¤¨Óºâ¡A³o¬O¹Ï¤ù»Pµøµ¡Ãä¬Éªº¶ZÂ÷¡Aµ¥¤@¤U§Ú­ÌÁÙ­n­pºâ¹Ï¤ù¯u¥¿ªº¦ì¸m°Õ¡I
setinit()¨ç¦¡¡Aµ{¦¡½X6¦Ü11¦æ¡]ºô­¶­ì©l½XÂŦâ¼Ðµù¡^¡G³o­Ó¨ç¦¡´N¬O¥Î¨Ó³]©w¹Ï¤ùªºªì©l¦ì¸m¡A¹Ï¤ùªºªì©l¦ì¸m¬Oºô­¶µøµ¡Åã¥Ü°Ï°ì´î±¼§Ú­Ì¹w³]ªº¹Ï¤ù»Pµøµ¡Ãä¬Éªº¶ZÂ÷¡I»¡ªº¤£®e©ö²z¸Ñ¡A¤p»x¥H¹Ï¤ùªº¤ô¥­¦ì¸m¬°¨Ò¡A§A¬Ý¤F¤U¹Ïªº¸Ñ»¡´NÁA¤F°Õ¡I

13-11.png
2010-5-19 09:59



  • Renew()¨ç¦¡¡Aµ{¦¡½X21¦Ü25¦æ¡]ºô­¶­ì©l½X¾ï¦â¼Ðµù¡^¡Gsetinit()¨ç¦¡¥u¬O¥Î¨Ó³]©wºô­¶¸ü¤J®É¹Ï¤ùªº¥X²{¦ì¸m¡]­¶­±ÁÙ¨S±²°Ê®É¡^¡A¦ÓRenew()¨ç¦¡ªº¤u§@«h¬O¡G­¶­±±²°Ê®ÉÅܧó¹Ï¤ùªº§Y®É¦ì¸m¡I
  • gomove()¨ç¦¡¡Aµ{¦¡½X28¦Ü33¦æ¡]ºô­¶­ì©l½X²`ÂŦâ¼Ðµù¡^¡G³o¬O¯B°Ê¹Ï¤ù®ÄªGªº°_©l¨ç¦¡¡A¥¦·|©I¥ssetinit()¨ç¦¡³]©wºô¹Ï¤ùªº¥X²{¦ì¸m¡A±µµÛ³]©wwindow.onresize¡]ºô­¶µøµ¡¤j¤p½Õ¾ã®É¡^¨Æ¥óµo¥Í®É©I¥sRenew()¨ç¦¡§ïÅܹϤù¦bºô­¶¤¤ªº¦ì¸m¡I
  • setInterval ()¨ç¦¡¡Aµ{¦¡½X32¦æ¡G©Ç©Ç¡I³o­Ó¬O¤°»ò£«¡H¥¦¬O¤@­Ó©w®É¾¹¨ç¦¡¡I§@¥Î¸òsetTimeout()¨ç¬O¬Û¦P¡A¤£¹L¥¦¤£¥Î­«½Æ©I¥s¡A§A¥u­n³]©w¤@¦¸¤§«á¥¦´N·|¤@ª½°õ¦æ¡A¥¦·|¦b§A³]©wªº®É¶¡¨ì®É´N°õ¦æ©Ò¹w³]ªº¨ç¦¡¡A¥¦ªº®É¶¡³æ¦ì¤´µM¬O²@¬í¡C
    1. setinterval (¡§code¡¨,interval)
    2. setinterval(¡§±ý°õ¦æªºµ{¦¡½X©Î¨ç¦¡¡¨,¶¡¹j®É¶¡)
    ½Æ»s¥N½X

    • code¡G¦b«ü©wªº¶¡¹j®É¶¡¨ì¹F®É©Ò­n°õ¦æªºµ{¦¡½X©Î¨ç¦¡©I¥s¡C
    • interval¡G«ü©w°õ¦æµ{¦¡½X©Î¨ç¦¡©I¥sªº¶¡¹j®É¶¡¡C

  • ¦bºô­¶¸ü¤J«á¡A§Ú­Ì´N©I¥sgomove()¨ç¦¡¡AÅý§Ú­Ìªºµ{¦¡¶}©l°Ê°_¨Ó¡Aµ{¦¡½X40¦Ü44¦æ¡]ºô­¶­ì©l½X¯»¬õ¼Ðµù¡^¡C¤p»x§A¸Ë¶Ì³á¡I¬°¦ó¤£ª½±µ¦b<BODY>¼ÐÅÒ¤º¨Ï¥ÎOnLoad¨Æ¥ó±±¨î¾¹¥h©I¥sgomove()¨ç¦¡¡H³£¥i¥H°Õ¡I¤p»x¥u¬O§Æ±æ§A¯à¦h¾Ç¤@¨Ç§Þ¥©¹À¡I

·í§A¶}±Ò½d¨Ò13-8.htm®É·|µo²{¡AÁÙ¬O¨S¦³±²°Ê¶b¥i¥Î¡A¬Ý¤£¨ì®ÄªG£«¡A­ì¦]¤§«e¤w¸g»¡¹L¤F¡A§A·Q¤@·Q¡A¤£¹L¤p»xÁÙ¬O¹w³Æ¤F¤@­Ó13-9.htm¦nÅý§A¯à¬Ý¨ì®ÄªG¡A¶}±Ò¬Ý¬Ý§a¡I 13-9.rar (638 Bytes)
13-12.png
2010-5-19 10:00
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

        ÀR«ä¦Û¦b : ¤p¨Æ¤£°µ¡B¤j¨ÆÃø¦¨¡C
ªð¦^¦Cªí ¤W¤@¥DÃD