Win8风格的Web启动界面-win8界面

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

页面布局

HTML

View Code   
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        <link rel="stylesheet" type="text/css" href="lib/style.css"/> 
        <link rel="shortcut icon" href="favicon.png"/> 
        <script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script> 
        <script type="text/javascript" src="lib/jquery.animation.easing.js"></script> 
        <script type="text/javascript" src="lib/jquery.mousewheel.min.js"></script> 
        <script type="text/javascript" src="source.js"></script> 
        <script type="text/javascript" src="lib/script.js"></script> 
          
        <title>New tab</title> 
    </head> 
    <body> 
        <div id="place"> 
            <div id="name1"></div> 
            <div id="wrapper1"> 
                <div id="thumb1-1"></div> 
                <div id="thumb1-2"></div> 
                <div id="thumb1-3"></div> 
                <div id="thumb1-4"></div> 
                <div id="thumb1-5"></div> 
                <div id="thumb1-6"></div> 
                <div id="thumb1-7"></div> 
                <div id="thumb1-8"></div> 
                <div id="thumb1-9"></div> 
                <div id="thumb1-10"></div> 
                <div id="thumb1-11"></div> 
                <div id="thumb1-12"></div> 
              
                <form action="" method="get"> 
                    <input type="text" name="q" value="" /><button type="submit"></button> 
                    <div id="engines1"> 
                        <div id="google1"></div> 
                        <div id="bing1"></div> 
                        <div id="yahoo1"></div> 
                        <div id="wikipedia1"></div> 
                    </div> 
                    <div id="search-engine1"></div> 
                </form> 
            </div><!-- end wrapper1 --> 
            <div id="button1to2"></div> 
            <div id="button2to1"></div> 
            <div id="name2"></div> 
            <div id="wrapper2"> 
                <div id="thumb2-1"></div> 
                <div id="thumb2-2"></div> 
                <div id="thumb2-3"></div> 
                <div id="thumb2-4"></div> 
                <div id="thumb2-5"></div> 
                <div id="thumb2-6"></div> 
                <div id="thumb2-7"></div> 
                <div id="thumb2-8"></div> 
                <div id="thumb2-9"></div> 
                <div id="thumb2-10"></div> 
                <div id="thumb2-11"></div> 
                <div id="thumb2-12"></div> 
              
                <form action="" method="get"> 
                    <input type="text" name="q" value="" placeholder="" /><button type="submit"></button> 
                    <div id="engines2"> 
                        <div id="google2"></div> 
                        <div id="bing2"></div> 
                        <div id="yahoo2"></div> 
                        <div id="wikipedia2"></div> 
                    </div> 
                    <div id="search-engine2"></div> 
                </form> 
            </div><!-- end wrapper2 --> 
            <div id="button2to3"></div> 
            <div id="button3to2"></div> 
            <div id="name3"></div> 
            <div id="wrapper3"> 
                <div id="thumb3-1"></div> 
                <div id="thumb3-2"></div> 
                <div id="thumb3-3"></div> 
                <div id="thumb3-4"></div> 
                <div id="thumb3-5"></div> 
                <div id="thumb3-6"></div> 
                <div id="thumb3-7"></div> 
                <div id="thumb3-8"></div> 
                <div id="thumb3-9"></div> 
                <div id="thumb3-10"></div> 
                <div id="thumb3-11"></div> 
                <div id="thumb3-12"></div> 
              
                <form action="" method="get"> 
                    <input type="text" name="q" value="" placeholder="" /><button type="submit"></button> 
                    <div id="engines3"> 
                        <div id="google3"></div> 
                        <div id="bing3"></div> 
                        <div id="yahoo3"></div> 
                        <div id="wikipedia3"></div> 
                    </div> 
                    <div id="search-engine3"></div> 
                </form> 
            </div><!-- end wrapper3 --> 
        </div><!-- end place --> 
    </body> 
</html>

#p#

数据源 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' 
};

#p#

核心脚本 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++){  
            $('<style>#wrapper'+i+' div.site:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;margin-left:4px;margin-top:4px;}</style>').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('<img id="net" src="img/net.png" /><a href="'+url+'"><div class="title">'+title+'</div></a>');  
            }  
            else{  
                $('#thumb'+(j+1)+'-'+(i+1)).html('<a href="'+url+'"><img src="http://developer.51cto.com/exp/code/img/thumb/'+thumb+'" /></a>');  
            }  
        };  
    };  
      
    $('#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_style_web_start_page_and_config.rar

改造后的示例：http://www.mayixue.com/demo/win8page/index.htm

示例代码：Win8StartScreen.rar

在这里感谢原作者，记录下来留个念想。

【编辑推荐】