Win8风格的Web启动界面

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

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

页面布局

HTML

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

    数据源 source.js

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

    #p#

    核心脚本 script.js

     
     
     
     
    1. View Code 
    2. $(document).ready(function(){
    3.     var num = numberOfScreens;
    4.     for(var i=1;i<=num;i++){
    5.         $('#name'+i).html(blockName[i]);
    6.     }
    7.     
    8.     if(hoverEffect){
    9.         for(i=1;i<=num;i++){
    10.             $('').appendTo('head');
    11.         };
    12.     };
    13.     
    14.     if(searchEngine=='google'){
    15.         search='http://www.google.com/search';
    16.     }
    17.     else if(searchEngine=='bing'){
    18.         search='http://www.bing.com/search';
    19.     }
    20.     else if(searchEngine=='yahoo'){
    21.         search='http://search.yahoo.com/bin/search';
    22.     }
    23.     else{
    24.         search='http://www.google.com/search';
    25.         searchEngine='google';
    26.     };
    27.     $('form').attr('action',search);
    28.     $('#search-engine').css('background','#fff url(img/'+searchEngine+'.png) center center no-repeat');
    29.     
    30.     var windowWidth = $(window).width();
    31.     var windowHeight = $(window).height();
    32.     var left1 = Math.floor((windowWidth - 960)/2);
    33.     var left2 = left1 - 1040;
    34.     var left3 = left1 - 2080;
    35.     var wrapperTop = Math.floor((windowHeight - 480)/2)-60;
    36.     
    37.     $('#place').css({'left':left1,'top':wrapperTop});
    38.     var wrapperPos = 1;
    39.     $('#wrapper1 input:text').focus();
    40.     var animDone = true;
    41.     
    42.     function anim1to2(){
    43.         $('#wrapper1 input:text').focusout();
    44.         animDone = false;
    45.         $('#place').animate({
    46.             left: left2,
    47.         },1000,'circEaseOut',function() {
    48.             $('#wrapper2 input:text').focus();
    49.             animDone = true;
    50.             wrapperPos = 2;
    51.         });
    52.         $('#button1to2').hide();            
    53.         $('#button2to1').show();
    54.         if(num>2){
    55.             $('#button2to3').show();
    56.             $('#button3to2').hide();
    57.         };
    58.     };
    59.     
    60.     function anim2to1(){
    61.         $('#wrapper2 input:text').focusout();
    62.         animDone = false;
    63.         $('#place').animate({
    64.             left: left1
    65.         },1000,'circEaseOut',function() {
    66.             $('#wrapper1 input:text').focus();
    67.             animDone = true;
    68.             wrapperPos = 1;
    69.         });
    70.         $('#button1to2').show();            
    71.         $('#button2to1').hide();
    72.         if(num>2){
    73.             $('#button2to3').hide();
    74.             $('#button3to2').hide();
    75.         };        
    76.     };
    77.     
    78.     function anim2to3(){
    79.         $('#wrapper2 input:text').focusout();
    80.         animDone = false;
    81.         $('#place').animate({
    82.             left: left3
    83.         },1000,'circEaseOut',function() {
    84.             $('#wrapper3 input:text').focus();
    85.             animDone = true;
    86.             wrapperPos = 3;
    87.         });
    88.         $('#button1to2').hide();
    89.         $('#button3to2').show();
    90.         $('#button2to1').hide();
    91.         $('#button2to3').h

      分享名称:Win8风格的Web启动界面
      当前URL:http://www.36103.cn/qtweb/news42/24892.html

      网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

      广告

      声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联