如何实现Win8风格的Web启动界面
本篇文章为大家展示了如何实现Win8风格的Web启动界面,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
10年积累的做网站、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有桥西免费网站建设让你可以放心的选择与我们合作。
主要用到jquery.animation.easing.js 和jquery.mousewheel.min.js 两个jQuery插件。
页面布局
HTML
View CodeNew tab
数据源 source.js
View Code var hoverEffect = true; // set true for hover effect, set false for no hover effect var searchEngine = 'google'; // default search engine - set google for google search, bing for bing search, yahoo for yahoo search var numberOfScreens = 3; // set number of screens (1 or 2 or 3) var blockName = new Array(); // set names of blocks blockName[1] = 'Most used'; blockName[2] = 'Social'; blockName[3] = 'News & fun'; var bookmark = new Array(); bookmark[0] = new Array(); bookmark[1] = new Array(); bookmark[2] = new Array(); // set your bookmarks here: (If you do not fill 'thumb' for thumbnail will be used title) // FIRST BLOCK bookmark[0][0] = { 'title':'YouTube', 'url':'http://youtube.com', 'thumb':'youtube.png' }; bookmark[0][1] = { 'title':'Yahoo', 'url':'http://yahoo.com', 'thumb':'yahoo.png' }; bookmark[0][2] = { 'title':'Grooveshark', 'url':'http://grooveshark.com', 'thumb':'grooveshark.png' }; bookmark[0][3] = { 'title':'last.fm', 'url':'http://www.last.fm/', 'thumb':'lastfm.png' }; bookmark[0][4] = { 'title':'twitter', 'url':'http://twitter.com', 'thumb':'twitter.png' }; bookmark[0][5] = { 'title':'google', 'url':'http://google.com', 'thumb':'google.png' }; bookmark[0][6] = { 'title':'facebook', 'url':'http://facebook.com', 'thumb':'facebook.png' }; bookmark[0][7] = { 'title':'BBC news', 'url':'http://www.bbc.co.uk/news/', 'thumb':'bbcnews.png' }; bookmark[0][8] = { 'title':'CNN', 'url':'http://www.cnn.com', 'thumb':'cnn.png' }; bookmark[0][9] = { 'title':'deviantART', 'url':'http://deviantart.com', 'thumb':'deviantart.png' }; bookmark[0][10] = { 'title':'wikipedia', 'url':'http://wikipedia.org', 'thumb':'wikipedia.png' }; bookmark[0][11] = { 'title':'iTunes', 'url':'http://www.apple.com/itunes/', 'thumb':'itunes.png' }; // end of FIRST BLOCK // SECOND BLOCK bookmark[1][0] = { 'title':'linkedin', 'url':'http://www.linkedin.com/', 'thumb':'linkedin.png' }; bookmark[1][1] = { 'title':'digg', 'url':'http://digg.com/', 'thumb':'digg.png' }; bookmark[1][2] = { 'title':'flickr', 'url':'http://www.flickr.com/', 'thumb':'flickr.png' }; bookmark[1][3] = { 'title':'msn', 'url':'http://www.msn.com/', 'thumb':'msn.png' }; bookmark[1][4] = { 'title':'reddit', 'url':'http://www.reddit.com/', 'thumb':'reddit.png' }; bookmark[1][5] = { 'title':'skype', 'url':'http://www.skype.com/', 'thumb':'skype.png' }; bookmark[1][6] = { 'title':'technorati', 'url':'http://technorati.com', 'thumb':'technorati.png' }; bookmark[1][7] = { 'title':'delicious', 'url':'http://www.delicious.com/', 'thumb':'delicious.png' }; bookmark[1][8] = { 'title':'MySpace', 'url':'http://www.myspace.com/', 'thumb':'myspace.png' }; bookmark[1][9] = { 'title':'orkut', 'url':'http://www.orkut.com/', 'thumb':'orkut.png' }; bookmark[1][10] = { 'title':'tumblr', 'url':'http://www.tumblr.com/', 'thumb':'tumblr.png' }; bookmark[1][11] = { 'title':'StumbleUpon', 'url':'http://www.stumbleupon.com/', 'thumb':'stumbleupon.png' }; //end of SECOND BLOCK // THIRD BLOCK bookmark[2][0] = { 'title':'eurosport', 'url':'http://www.eurosport.com/', 'thumb':'eurosport.png' }; bookmark[2][1] = { 'title':'amazon', 'url':'http://www.amazon.com/', 'thumb':'amazon.png' }; bookmark[2][2] = { 'title':'eBay', 'url':'http://www.ebay.com/', 'thumb':'ebay.png' }; bookmark[2][3] = { 'title':'IMDb', 'url':'http://www.imdb.com/', 'thumb':'imdb.png' }; bookmark[2][4] = { 'title':'vimeo', 'url':'http://vimeo.com', 'thumb':'vimeo.png' }; bookmark[2][5] = { 'title':'lifehacker', 'url':'http://lifehacker.com/', 'thumb':'lifehacker.png' }; bookmark[2][6] = { 'title':'engadged', 'url':'http://www.engadget.com/', 'thumb':'engadget.png' }; bookmark[2][7] = { 'title':'zune', 'url':'http://www.zune.net/', 'thumb':'zune.png' }; bookmark[2][8] = { 'title':'dropbox', 'url':'http://www.dropbox.com/', 'thumb':'dropbox.png' }; bookmark[2][9] = { 'title':'National Geographic', 'url':'http://www.nationalgeographic.com/', 'thumb':'natgeo.png' }; bookmark[2][10] = { 'title':'CBC news', 'url':'http://www.cbc.ca/news/', 'thumb':'cbcnews.png' }; bookmark[2][11] = { 'title':'weather.com', 'url':'http://www.weather.com/', 'thumb':'weather.png' };
核心脚本 script.js
View Code $(document).ready(function(){ var num = numberOfScreens; for(var i=1;i<=num;i++){ $('#name'+i).html(blockName[i]); } if(hoverEffect){ for(i=1;i<=num;i++){ $('').appendTo('head'); }; }; if(searchEngine=='google'){ search='http://www.google.com/search'; } else if(searchEngine=='bing'){ search='http://www.bing.com/search'; } else if(searchEngine=='yahoo'){ search='http://search.yahoo.com/bin/search'; } else{ search='http://www.google.com/search'; searchEngine='google'; }; $('form').attr('action',search); $('#search-engine').css('background','#fff url(img/'+searchEngine+'.png) center center no-repeat'); var windowWidth = $(window).width(); var windowHeight = $(window).height(); var left1 = Math.floor((windowWidth - 960)/2); var left2 = left1 - 1040; var left3 = left1 - 2080; var wrapperTop = Math.floor((windowHeight - 480)/2)-60; $('#place').css({'left':left1,'top':wrapperTop}); var wrapperPos = 1; $('#wrapper1 input:text').focus(); var animDone = true; function anim1to2(){ $('#wrapper1 input:text').focusout(); animDone = false; $('#place').animate({ left: left2, },1000,'circEaseOut',function() { $('#wrapper2 input:text').focus(); animDone = true; wrapperPos = 2; }); $('#button1to2').hide(); $('#button2to1').show(); if(num>2){ $('#button2to3').show(); $('#button3to2').hide(); }; }; function anim2to1(){ $('#wrapper2 input:text').focusout(); animDone = false; $('#place').animate({ left: left1 },1000,'circEaseOut',function() { $('#wrapper1 input:text').focus(); animDone = true; wrapperPos = 1; }); $('#button1to2').show(); $('#button2to1').hide(); if(num>2){ $('#button2to3').hide(); $('#button3to2').hide(); }; }; function anim2to3(){ $('#wrapper2 input:text').focusout(); animDone = false; $('#place').animate({ left: left3 },1000,'circEaseOut',function() { $('#wrapper3 input:text').focus(); animDone = true; wrapperPos = 3; }); $('#button1to2').hide(); $('#button3to2').show(); $('#button2to1').hide(); $('#button2to3').hide(); }; function anim3to2(){ $('#wrapper3 input:text').focusout(); animDone = false; $('#place').animate({ left: left2 },1000,'circEaseOut',function() { $('#wrapper2 input:text').focus(); animDone = true; wrapperPos = 2; }); $('#button1to2').hide(); $('#button3to2').hide(); $('#button2to1').show(); $('#button2to3').show(); }; if(num>1){ $('#button1to2').click(function(){ anim1to2(); }); $('#button2to1').click(function(){ anim2to1(); }); if(num>2){ $('#button2to3').click(function(){ anim2to3(); }); $('#button3to2').click(function(){ anim3to2(); }); }; }; $(document).bind('keydown',function(event){ if(event.keyCode == '39' || event.keyCode == '37'){ event.preventDefault(); } if(event.which=='39' && animDone){ if(wrapperPos==1 && num>1){ anim1to2(); }; if(wrapperPos==2 && num>2){ anim2to3(); }; }; if(event.which=='37' && animDone){ if(wrapperPos==3){ anim3to2(); }; if(wrapperPos==2){ anim2to1(); }; }; }); $(document).mousewheel(function(event, delta) { if (delta > 0 && animDone){ if(wrapperPos==3){ anim3to2(); }; if(wrapperPos==2){ anim2to1(); }; } else if (delta < 0 && animDone){ if(wrapperPos==1 && num>1){ anim1to2(); }; if(wrapperPos==2 && num>2){ anim2to3(); }; }; event.preventDefault(); }); var j=0; for (j=0; j <=(num-1); j++) { if(bookmark[j]==null) continue; for(i=0;i<=11;i++){ if(bookmark[j][i]==null) continue; var title = bookmark[j][i]['title']; var url = bookmark[j][i]['url']; var thumb = bookmark[j][i]['thumb']; if(thumb==''){ $('#thumb'+(j+1)+'-'+(i+1)).html(''+title+''); } else{ $('#thumb'+(j+1)+'-'+(i+1)).html(''); } }; }; $('#search-engine').click(function() { $('#engines').fadeToggle('fast','circEaseOut'); $('#wrapper1 input:text').css('background','#fff'); }); $('#google').click(function() { $('#wrapper1 form').attr('action','https://www.google.com/search'); $('#engines').fadeToggle('fast','circEaseOut'); $('#wrapper1 #search-engine').css('background','#fff url(img/google.png) center center no-repeat'); $('#wrapper1 input:hidden').detach(); $('#wrapper1 input:first').attr('name','q'); $('#wrapper1 input:text').focus(); }); …… });
上述内容就是如何实现Win8风格的Web启动界面,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
本文标题:如何实现Win8风格的Web启动界面
分享地址:http://scyanting.com/article/gjjjjo.html