1 / 9

Virtual Scrolling

Virtual Scrolling. Step One – Timing Events. To execute some code at specified time-intervals JavaScript Callback function Two key methods are: setInterval () - executes a function, over and over again, at specified time intervals

inoke
Download Presentation

Virtual Scrolling

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Virtual Scrolling

  2. Step One – Timing Events • To execute some code at specified time-intervals • JavaScript • Callback function • Two key methods are: • setInterval() - executes a function, over and over again, at specified time intervals • setTimeout() - executes a function, once, after waiting a specified number of milliseconds • See vs_01.html Virtual Scrolling

  3. Step Two – Color Stripe • DIV class : square • Size : 寬*高 100*100(px) • See vs_02.html • DIV id : stripe • Size : 寬*高 755*100(px) • position :relative stripe Virtual Scrolling

  4. Step Three – View Window • See vs_03.html • DIV class: container • Size : 寬*高 315*100 Virtual Scrolling

  5. Step Four – Control Button • See vs_04.html • DIV << >> Virtual Scrolling

  6. Step Five – Scroll It • See vs_05.html • Two call-back functions << >> Virtual Scrolling

  7. Step Six – Animation It • See vs_06.html << >> Virtual Scrolling

  8. <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>無標題文件</title> </head> <scripttype="text/javascript"> functiontimeMsg() { vartxt = document.getElementById("txt").value; setTimeout("alert('時間到!');",txt * 1000); } </script> <body> <inputid="txt"type="text"/> <inputtype="button"value="show message"onclick="timeMsg()"/> </body> </html> Virtual Scrolling

  9. The End Virtual Scrolling

More Related