Win8 Metro风格的html导航模板特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Win8 Metro风格的html导航模板特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为Win8 Metro风格的html导航模板，属于站长常用代码" />
<title>Win8 Metro风格的html导航模板</title>
<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>
</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>

JS代码(source.js):

var hoverEffect = true;
	// set true for hover effect,set false for no hover effectvar searchEngine = 'google';
	// default search engine - set google for google search,bing for bing search,yahoo for yahoo searchvar numberOfScreens = 3;
	// set number of screens (1 or 2 or 3)var blockName = new Array();
	// set names of blocksblockName[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 BLOCKbookmark[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 BLOCKbookmark[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 BLOCKbookmark[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.lanrentuku.com/','thumb':'cbcnews.png'}
;
	bookmark[2][11] ={
	'title':'weather.com','url':'http://www.weather.com/','thumb':'weather.png'}
;

附件:下载该文件资源,减少时间成本(增值服务)