Win8风格的Web启动界面

主要用到jquery.animation.easing.js 和jquery.mousewheel.min.js 两个jQuery插件。

成都创新互联公司是一家集网站建设,乐东黎族企业网站建设,乐东黎族品牌网站建设,网站定制,乐东黎族网站建设报价,网络营销,网络优化,乐东黎族网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

页面布局

HTML

 
 
 
 
    
  
  
  
  
  1. View Code  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.         
    6. 
  
  
  
  
  6.         
    7. 
  
  
  
  
  7.         
    8. 
  
  
  
  
  8.         
    9. 
  
  
  
  
  9.         
    10. 
  
  
  
  
  10.         
    11. 
  
  
  
  
  11.         
    12. 
  
  
  
  
  12.         
    13. 
  
  
  
  
  13.          
    14. 
  
  
  
  
  14.         New tab
    15. 
  
  
  
  
  15.     
    16. 
  
  
  
  
  16.     
    17. 
  
  
  
  
  17.         
    18. 
  
  
  
  
  18.             
  •             
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •             
  •                 
  •                     
  •                     
  •                         
  •                         
  •                         
  •                         
  •                     
  •                     
  •                 
  •             
  •             
  •             
  •             
  •             
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •             
  •                 
  •                     
  •                     
  •                         
  •                         
  •                         
  •                         
  •                     
  •                     
  •                 
  •             
  •             
  •             
  •             
  •             
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •                 
  •             
  •                 
  •                     
  •                     
  •                         
  •                         
  •                         
  •                         
  •                     
  •                     
  •                 
  •             
  •         
  •     

  • #p#

    数据源 source.js

     
 
 
 
      
  
  
  
  
    1. View Code  
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. var hoverEffect = true; // set true for hover effect, set false for no hover effect 
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. var searchEngine = 'google'; // default search engine - set google for google search, bing for bing search, yahoo for yahoo search 
      6. 
  
  
  
  
    6. 
  
  
  
  
    7. var numberOfScreens = 3; // set number of screens (1 or 2 or 3) 
      8. 
  
  
  
  
    8.   
      9. 
  
  
  
  
    9. var blockName = new Array(); // set names of blocks 
      10. 
  
  
  
  
    10. blockName[1] = 'Most used'; 
      11. 
  
  
  
  
    11. blockName[2] = 'Social'; 
      12. 
  
  
  
  
    12. blockName[3] = 'News & fun'; 
      13. 
  
  
  
  
    13. 
  
  
  
  
    14. var bookmark = new Array(); 
      15. 
  
  
  
  
    15. bookmark[0] = new Array(); 
      16. 
  
  
  
  
    16. bookmark[1] = new Array(); 
      17. 
  
  
  
  
    17. bookmark[2] = new Array(); 
      18. 
  
  
  
  
    18. 
  
  
  
  
    19. // set your bookmarks here: (If you do not fill 'thumb' for thumbnail will be used title) 
      20. 
  
  
  
  
    20. // FIRST BLOCK 
      21. 
  
  
  
  
    21. bookmark[0][0] = { 
      22. 
  
  
  
  
    22.     'title':'YouTube', 
      23. 
  
  
  
  
    23.     'url':'http://youtube.com', 
      24. 
  
  
  
  
    24.     'thumb':'youtube.png'
      25. 
  
  
  
  
    25. }; 
      26. 
  
  
  
  
    26. bookmark[0][1] = { 
      27. 
  
  
  
  
    27.     'title':'Yahoo', 
      28. 
  
  
  
  
    28.     'url':'http://yahoo.com', 
      29. 
  
  
  
  
    29.     'thumb':'yahoo.png'
      30. 
  
  
  
  
    30. }; 
      31. 
  
  
  
  
    31. bookmark[0][2] = { 
      32. 
  
  
  
  
    32.     'title':'Grooveshark', 
      33. 
  
  
  
  
    33.     'url':'http://grooveshark.com', 
      34. 
  
  
  
  
    34.     'thumb':'grooveshark.png'
      35. 
  
  
  
  
    35. }; 
      36. 
  
  
  
  
    36. bookmark[0][3] = { 
      37. 
  
  
  
  
    37.     'title':'last.fm', 
      38. 
  
  
  
  
    38.     'url':'http://www.last.fm/', 
      39. 
  
  
  
  
    39.     'thumb':'lastfm.png'
      40. 
  
  
  
  
    40. }; 
      41. 
  
  
  
  
    41. bookmark[0][4] = { 
      42. 
  
  
  
  
    42.     'title':'twitter', 
      43. 
  
  
  
  
    43.     'url':'http://twitter.com', 
      44. 
  
  
  
  
    44.     'thumb':'twitter.png'
      45. 
  
  
  
  
    45. }; 
      46. 
  
  
  
  
    46. bookmark[0][5] = { 
      47. 
  
  
  
  
    47.     'title':'google', 
      48. 
  
  
  
  
    48.     'url':'http://google.com', 
      49. 
  
  
  
  
    49.     'thumb':'google.png'
      50. 
  
  
  
  
    50. }; 
      51. 
  
  
  
  
    51. bookmark[0][6] = { 
      52. 
  
  
  
  
    52.     'title':'facebook', 
      53. 
  
  
  
  
    53.     'url':'http://facebook.com', 
      54. 
  
  
  
  
    54.     'thumb':'facebook.png'
      55. 
  
  
  
  
    55. }; 
      56. 
  
  
  
  
    56. bookmark[0][7] = { 
      57. 
  
  
  
  
    57.     'title':'BBC news', 
      58. 
  
  
  
  
    58.     'url':'http://www.bbc.co.uk/news/', 
      59. 
  
  
  
  
    59.     'thumb':'bbcnews.png'
      60. 
  
  
  
  
    60. }; 
      61. 
  
  
  
  
    61. bookmark[0][8] = { 
      62. 
  
  
  
  
    62.     'title':'CNN', 
      63. 
  
  
  
  
    63.     'url':'http://www.cnn.com', 
      64. 
  
  
  
  
    64.     'thumb':'cnn.png'
      65. 
  
  
  
  
    65. }; 
      66. 
  
  
  
  
    66. bookmark[0][9] = { 
      67. 
  
  
  
  
    67.     'title':'deviantART', 
      68. 
  
  
  
  
    68.     'url':'http://deviantart.com', 
      69. 
  
  
  
  
    69.     'thumb':'deviantart.png'
      70. 
  
  
  
  
    70. }; 
      71. 
  
  
  
  
    71. bookmark[0][10] = { 
      72. 
  
  
  
  
    72.     'title':'wikipedia', 
      73. 
  
  
  
  
    73.     'url':'http://wikipedia.org', 
      74. 
  
  
  
  
    74.     'thumb':'wikipedia.png'
      75. 
  
  
  
  
    75. }; 
      76. 
  
  
  
  
    76. bookmark[0][11] = { 
      77. 
  
  
  
  
    77.     'title':'iTunes', 
      78. 
  
  
  
  
    78.     'url':'http://www.apple.com/itunes/', 
      79. 
  
  
  
  
    79.     'thumb':'itunes.png'
      80. 
  
  
  
  
    80. }; 
      81. 
  
  
  
  
    81. // end of FIRST BLOCK 
      82. 
  
  
  
  
    82. // SECOND BLOCK 
      83. 
  
  
  
  
    83. bookmark[1][0] = { 
      84. 
  
  
  
  
    84.     'title':'linkedin', 
      85. 
  
  
  
  
    85.     'url':'http://www.linkedin.com/', 
      86. 
  
  
  
  
    86.     'thumb':'linkedin.png'
      87. 
  
  
  
  
    87. }; 
      88. 
  
  
  
  
    88. bookmark[1][1] = { 
      89. 
  
  
  
  
    89.     'title':'digg', 
      90. 
  
  
  
  
    90.     'url':'http://digg.com/', 
      91. 
  
  
  
  
    91.     'thumb':'digg.png'
      92. 
  
  
  
  
    92. }; 
      93. 
  
  
  
  
    93. bookmark[1][2] = { 
      94. 
  
  
  
  
    94.     'title':'flickr', 
      95. 
  
  
  
  
    95.     'url':'http://www.flickr.com/', 
      96. 
  
  
  
  
    96.     'thumb':'flickr.png'
      97. 
  
  
  
  
    97. }; 
      98. 
  
  
  
  
    98. bookmark[1][3] = { 
      99. 
  
  
  
  
    99.     'title':'msn', 
      100. 
  
  
  
  
    100.     'url':'http://www.msn.com/', 
      101. 
  
  
  
  
    101.     'thumb':'msn.png'
      102. 
  
  
  
  
    102. }; 
      103. 
  
  
  
  
    103. bookmark[1][4] = { 
      104. 
  
  
  
  
    104.     'title':'reddit', 
      105. 
  
  
  
  
    105.     'url':'http://www.reddit.com/', 
      106. 
  
  
  
  
    106.     'thumb':'reddit.png'
      107. 
  
  
  
  
    107. }; 
      108. 
  
  
  
  
    108. bookmark[1][5] = { 
      109. 
  
  
  
  
    109.     'title':'skype', 
      110. 
  
  
  
  
    110.     'url':'http://www.skype.com/', 
      111. 
  
  
  
  
    111.     'thumb':'skype.png'
      112. 
  
  
  
  
    112. }; 
      113. 
  
  
  
  
    113. bookmark[1][6] = { 
      114. 
  
  
  
  
    114.     'title':'technorati', 
      115. 
  
  
  
  
    115.     'url':'http://technorati.com', 
      116. 
  
  
  
  
    116.     'thumb':'technorati.png'
      117. 
  
  
  
  
    117. }; 
      118. 
  
  
  
  
    118. bookmark[1][7] = { 
      119. 
  
  
  
  
    119.     'title':'delicious', 
      120. 
  
  
  
  
    120.     'url':'http://www.delicious.com/', 
      121. 
  
  
  
  
    121.     'thumb':'delicious.png'
      122. 
  
  
  
  
    122. }; 
      123. 
  
  
  
  
    123. bookmark[1][8] = { 
      124. 
  
  
  
  
    124.     'title':'MySpace', 
      125. 
  
  
  
  
    125.     'url':'http://www.myspace.com/', 
      126. 
  
  
  
  
    126.     'thumb':'myspace.png'
      127. 
  
  
  
  
    127. }; 
      128. 
  
  
  
  
    128. bookmark[1][9] = { 
      129. 
  
  
  
  
    129.     'title':'orkut', 
      130. 
  
  
  
  
    130.     'url':'http://www.orkut.com/', 
      131. 
  
  
  
  
    131.     'thumb':'orkut.png'
      132. 
  
  
  
  
    132. }; 
      133. 
  
  
  
  
    133. bookmark[1][10] = { 
      134. 
  
  
  
  
    134.     'title':'tumblr', 
      135. 
  
  
  
  
    135.     'url':'http://www.tumblr.com/', 
      136. 
  
  
  
  
    136.     'thumb':'tumblr.png'
      137. 
  
  
  
  
    137. }; 
      138. 
  
  
  
  
    138. bookmark[1][11] = { 
      139. 
  
  
  
  
    139.     'title':'StumbleUpon', 
      140. 
  
  
  
  
    140.     'url':'http://www.stumbleupon.com/', 
      141. 
  
  
  
  
    141.     'thumb':'stumbleupon.png'
      142. 
  
  
  
  
    142. }; 
      143. 
  
  
  
  
    143. //end of SECOND BLOCK 
      144. 
  
  
  
  
    144. // THIRD BLOCK 
      145. 
  
  
  
  
    145. bookmark[2][0] = { 
      146. 
  
  
  
  
    146.     'title':'eurosport', 
      147. 
  
  
  
  
    147.     'url':'http://www.eurosport.com/', 
      148. 
  
  
  
  
    148.     'thumb':'eurosport.png'
      149. 
  
  
  
  
    149. }; 
      150. 
  
  
  
  
    150. bookmark[2][1] = { 
      151. 
  
  
  
  
    151.     'title':'amazon', 
      152. 
  
  
  
  
    152.     'url':'http://www.amazon.com/', 
      153. 
  
  
  
  
    153.     'thumb':'amazon.png'
      154. 
  
  
  
  
    154. }; 
      155. 
  
  
  
  
    155. bookmark[2][2] = { 
      156. 
  
  
  
  
    156.     'title':'eBay', 
      157. 
  
  
  
  
    157.     'url':'http://www.ebay.com/', 
      158. 
  
  
  
  
    158.     'thumb':'ebay.png'
      159. 
  
  
  
  
    159. }; 
      160. 
  
  
  
  
    160. bookmark[2][3] = { 
      161. 
  
  
  
  
    161.     'title':'IMDb', 
      162. 
  
  
  
  
    162.     'url':'http://www.imdb.com/', 
      163. 
  
  
  
  
    163.     'thumb':'imdb.png'
      164. 
  
  
  
  
    164. }; 
      165. 
  
  
  
  
    165. bookmark[2][4] = { 
      166. 
  
  
  
  
    166.     'title':'vimeo', 
      167. 
  
  
  
  
    167.     'url':'http://vimeo.com', 
      168. 
  
  
  
  
    168.     'thumb':'vimeo.png'
      169. 
  
  
  
  
    169. }; 
      170. 
  
  
  
  
    170. bookmark[2][5] = { 
      171. 
  
  
  
  
    171.     'title':'lifehacker', 
      172. 
  
  
  
  
    172.     'url':'http://lifehacker.com/', 
      173. 
  
  
  
  
    173.     'thumb':'lifehacker.png'
      174. 
  
  
  
  
    174. }; 
      175. 
  
  
  
  
    175. bookmark[2][6] = { 
      176. 
  
  
  
  
    176.     'title':'engadged', 
      177. 
  
  
  
  
    177.     'url':'http://www.engadget.com/', 
      178. 
  
  
  
  
    178.     'thumb':'engadget.png'
      179. 
  
  
  
  
    179. }; 
      180. 
  
  
  
  
    180. bookmark[2][7] = { 
      181. 
  
  
  
  
    181.     'title':'zune', 
      182. 
  
  
  
  
    182.     'url':'http://www.zune.net/', 
      183. 
  
  
  
  
    183.     'thumb':'zune.png'
      184. 
  
  
  
  
    184. }; 
      185. 
  
  
  
  
    185. bookmark[2][8] = { 
      186. 
  
  
  
  
    186.     'title':'dropbox', 
      187. 
  
  
  
  
    187.     'url':'http://www.dropbox.com/', 
      188. 
  
  
  
  
    188.     'thumb':'dropbox.png'
      189. 
  
  
  
  
    189. }; 
      190. 
  
  
  
  
    190. bookmark[2][9] = { 
      191. 
  
  
  
  
    191.     'title':'National Geographic', 
      192. 
  
  
  
  
    192.     'url':'http://www.nationalgeographic.com/', 
      193. 
  
  
  
  
    193.     'thumb':'natgeo.png'
      194. 
  
  
  
  
    194. }; 
      195. 
  
  
  
  
    195. bookmark[2][10] = { 
      196. 
  
  
  
  
    196.     'title':'CBC news', 
      197. 
  
  
  
  
    197.     'url':'http://www.cbc.ca/news/', 
      198. 
  
  
  
  
    198.     'thumb':'cbcnews.png'
      199. 
  
  
  
  
    199. }; 
      200. 
  
  
  
  
    200. bookmark[2][11] = { 
      201. 
  
  
  
  
    201.     'title':'weather.com', 
      202. 
  
  
  
  
    202.     'url':'http://www.weather.com/', 
      203. 
  
  
  
  
    203.     'thumb':'weather.png'
      204. 
  
  
  
  
    204. };
      205.

    #p#

    核心脚本 script.js

     
 
 
 
      
  
  
  
  
    1. View Code  
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. $(document).ready(function(){ 
      4. 
  
  
  
  
    4.     var num = numberOfScreens; 
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.     for(var i=1;i<=num;i++){ 
      7. 
  
  
  
  
    7.         $('#name'+i).html(blockName[i]); 
      8. 
  
  
  
  
    8.     } 
      9. 
  
  
  
  
    9.      
      10. 
  
  
  
  
    10.     if(hoverEffect){ 
      11. 
  
  
  
  
    11.         for(i=1;i<=num;i++){ 
      12. 
  
  
  
  
    12.             $('').appendTo('head'); 
      13. 
  
  
  
  
    13.         }; 
      14. 
  
  
  
  
    14.     }; 
      15. 
  
  
  
  
    15.      
      16. 
  
  
  
  
    16.     if(searchEngine=='google'){ 
      17. 
  
  
  
  
    17.         search='http://www.google.com/search'; 
      18. 
  
  
  
  
    18.     } 
      19. 
  
  
  
  
    19.     else if(searchEngine=='bing'){ 
      20. 
  
  
  
  
    20.         search='http://www.bing.com/search'; 
      21. 
  
  
  
  
    21.     } 
      22. 
  
  
  
  
    22.     else if(searchEngine=='yahoo'){ 
      23. 
  
  
  
  
    23.         search='http://search.yahoo.com/bin/search'; 
      24. 
  
  
  
  
    24.     } 
      25. 
  
  
  
  
    25.     else{ 
      26. 
  
  
  
  
    26.         search='http://www.google.com/search'; 
      27. 
  
  
  
  
    27.         searchEngine='google'; 
      28. 
  
  
  
  
    28.     }; 
      29. 
  
  
  
  
    29. 
  
  
  
  
    30.     $('form').attr('action',search); 
      31. 
  
  
  
  
    31.     $('#search-engine').css('background','#fff url(img/'+searchEngine+'.png) center center no-repeat'); 
      32. 
  
  
  
  
    32.      
      33. 
  
  
  
  
    33.     var windowWidth = $(window).width(); 
      34. 
  
  
  
  
    34.     var windowHeight = $(window).height(); 
      35. 
  
  
  
  
    35.     var left1 = Math.floor((windowWidth - 960)/2); 
      36. 
  
  
  
  
    36.     var left2 = left1 - 1040; 
      37. 
  
  
  
  
    37.     var left3 = left1 - 2080; 
      38. 
  
  
  
  
    38.     var wrapperTop = Math.floor((windowHeight - 480)/2)-60; 
      39. 
  
  
  
  
    39.      
      40. 
  
  
  
  
    40.     $('#place').css({'left':left1,'top':wrapperTop}); 
      41. 
  
  
  
  
    41.     var wrapperPos = 1; 
      42. 
  
  
  
  
    42.     $('#wrapper1 input:text').focus(); 
      43. 
  
  
  
  
    43.     var animDone = true; 
      44. 
  
  
  
  
    44.      
      45. 
  
  
  
  
    45.     function anim1to2(){ 
      46. 
  
  
  
  
    46.         $('#wrapper1 input:text').focusout(); 
      47. 
  
  
  
  
    47.         animDone = false; 
      48. 
  
  
  
  
    48.         $('#place').animate({ 
      49. 
  
  
  
  
    49.             left: left2, 
      50. 
  
  
  
  
    50.         },1000,'circEaseOut',function() { 
      51. 
  
  
  
  
    51.             $('#wrapper2 input:text').focus(); 
      52. 
  
  
  
  
    52.             animDone = true; 
      53. 
  
  
  
  
    53.             wrapperPos = 2; 
      54. 
  
  
  
  
    54.         }); 
      55. 
  
  
  
  
    55.         $('#button1to2').hide();             
      56. 
  
  
  
  
    56.         $('#button2to1').show(); 
      57. 
  
  
  
  
    57.         if(num>2){ 
      58. 
  
  
  
  
    58.             $('#button2to3').show(); 
      59. 
  
  
  
  
    59.             $('#button3to2').hide(); 
      60. 
  
  
  
  
    60.         }; 
      61. 
  
  
  
  
    61.     }; 
      62. 
  
  
  
  
    62.      
      63. 
  
  
  
  
    63.     function anim2to1(){ 
      64. 
  
  
  
  
    64.         $('#wrapper2 input:text').focusout(); 
      65. 
  
  
  
  
    65.         animDone = false; 
      66. 
  
  
  
  
    66.         $('#place').animate({ 
      67. 
  
  
  
  
    67.             left: left1 
      68. 
  
  
  
  
    68.         },1000,'circEaseOut',function() { 
      69. 
  
  
  
  
    69.             $('#wrapper1 input:text').focus(); 
      70. 
  
  
  
  
    70.             animDone = true; 
      71. 
  
  
  
  
    71.             wrapperPos = 1; 
      72. 
  
  
  
  
    72.         }); 
      73. 
  
  
  
  
    73.         $('#button1to2').show();             
      74. 
  
  
  
  
    74.         $('#button2to1').hide(); 
      75. 
  
  
  
  
    75.         if(num>2){ 
      76. 
  
  
  
  
    76.             $('#button2to3').hide(); 
      77. 
  
  
  
  
    77.             $('#button3to2').hide(); 
      78. 
  
  
  
  
    78.         };         
      79. 
  
  
  
  
    79.     }; 
      80. 
  
  
  
  
    80.      
      81. 
  
  
  
  
    81.     function anim2to3(){ 
      82. 
  
  
  
  
    82.         $('#wrapper2 input:text').focusout(); 
      83. 
  
  
  
  
    83.         animDone = false; 
      84. 
  
  
  
  
    84.         $('#place').animate({ 
      85. 
  
  
  
  
    85.             left: left3 
      86. 
  
  
  
  
    86.         },1000,'circEaseOut',function() { 
      87. 
  
  
  
  
    87.             $('#wrapper3 input:text').focus(); 
      88. 
  
  
  
  
    88.             animDone = true; 
      89. 
  
  
  
  
    89.             wrapperPos = 3; 
      90. 
  
  
  
  
    90.         }); 
      91. 
  
  
  
  
    91.         $('#button1to2').hide(); 
      92. 
  
  
  
  
    92.         $('#button3to2').show(); 
      93. 
  
  
  
  
    93.         $('#button2to1').hide(); 
      94. 
  
  
  
  
    94.         $('#button2to3').h            
      
                标题名称：Win8风格的Web启动界面
                
      
                文章转载：http://www.gawzjz.com/qtweb/news39/167639.html
            
      
            
      
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            
      
        
        
      
            
      猜你还喜欢下面的内容
      
            
        
      
    
    
      
        
      
            
      微信公众号知识
      
            
        
      
        
      
            
      分类信息网站
      
            
        
      
    
      


      
    
      
        谷歌推广　　 　成都主机租用　　 　成都商城网站开发　　 　成都制作网站　　 　华川商务　　 　成都酒店服定制　　 　四川正泰动物　　 　LED显示屏厂家　　 　网站设计　　 　企业营销型网站　　 　成都app软件开发公司　　 　成都广告招牌　　 　犀浦雨棚定制　　 　wap网站制作　　 　华泰海航　　 　雨棚定制　　 　网络推广公司　　 　注册域名　　 　成都虚拟主机　　 　成都服装定制