How to implement Win8 style Web Startup Interface
This article shows you how to achieve the Win8-style Web startup interface, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.
Two jQuery plug-ins, jquery.animation.easing.js and jquery.mousewheel.min.js, are mainly used.
Page layout
HTML
View Code New tab
Data source 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'}
Core script script.js
View Code $(document) .ready (function () {var num = numberOfScreens; for (var item1 / show) {$('# button2to3'). Show (); $('# button3to2'). Hide ();}; function anim2to1 () {$('# wrapper2 input:text'). Focusout (); animDone = false $('# place'). Animate ({left: left1}, 1000 focus () {$('# 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 focus () {$('# 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 focus () {$('# 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 juni0; for (juni0; j)
