Posted By

komposition on 06/27/08


Tagged

javascript js textmate html jquery effect scrollto


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

GaGa


localScroll Template


 / Published in: Other
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Jquerty localScroll Template</title>
  8.  
  9. <style type="text/css" media="screen">
  10. #slide_wrapper{
  11. width: 400px;
  12. height: 300px;
  13. overflow: hidden;
  14. }
  15.  
  16. #slide_box{
  17. width: 2000px;
  18. height: 300px;
  19. }
  20.  
  21. .section{
  22. float: left;
  23. width: 400px;
  24. height: 300px;
  25. margin: 0 20px 0 0 0;
  26. }
  27.  
  28. #section01{ background: #ecf; }
  29. #section02{ background: #acf; }
  30. #section03{ background: #cfc; }
  31. #section04{ background: #ffc; }
  32. #section05{ background: #fda; }
  33. </style>
  34.  
  35. <script src="common/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  36. <script src="common/js/jquery.scrollTo-min.js" type="text/javascript" charset="utf-8"></script>
  37. <script src="common/js/jquery.localscroll-min.js" type="text/javascript" charset="utf-8"></script>
  38. <script type="text/javascript" charset="utf-8">
  39. $(document).ready(function() {
  40. $('#scroll_navi').localScroll({
  41. target: '#slide_wrapper',
  42. axis: 'xy'
  43. });
  44. });
  45. </script>
  46. </head>
  47. <body>
  48. <div id="slide_wrapper"><!-- Static Box contain Sliding Box. set overflow:hidden-->
  49. <div id="slide_box"><!-- Sliding Box, it's Long or Large and contain some sections -->
  50. <div id="section01" class="section">
  51. section01
  52. </div>
  53. <div id="section02" class="section">
  54. section02
  55. </div>
  56. <div id="section03" class="section">
  57. section03
  58. </div>
  59. <div id="section04" class="section">
  60. section04
  61. </div>
  62. <div id="section05" class="section">
  63. section05
  64. </div>
  65. </div>
  66. </div>
  67. <ul id="scroll_navi">
  68. <li id="scroll_navi01"><a href="#section01">section01</a></li>
  69. <li id="scroll_navi02"><a href="#section02">section02</a></li>
  70. <li id="scroll_navi03"><a href="#section03">section03</a></li>
  71. <li id="scroll_navi04"><a href="#section04">section04</a></li>
  72. <li id="scroll_navi05"><a href="#section05">section05</a></li>
  73. </ul>
  74. </body>
  75. </html>

Report this snippet  

You need to login to post a comment.