120 likes | 301 Views
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
E N D
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
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
Step Three – View Window • See vs_03.html • DIV class: container • Size : 寬*高 315*100 Virtual Scrolling
Step Four – Control Button • See vs_04.html • DIV << >> Virtual Scrolling
Step Five – Scroll It • See vs_05.html • Two call-back functions << >> Virtual Scrolling
Step Six – Animation It • See vs_06.html << >> Virtual Scrolling
<!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
The End Virtual Scrolling