win8风格（metro）主页的学习

缺乏、安全感 2022-08-07 02:38 150阅读 0赞

以前造访过一个网站：[http://www.fishc.com/][http_www.fishc.com]

觉得不错。

所以，研究了一下。

后来发现，是基于这个的：

[http://www.cnblogs.com/mayixue/archive/2012/05/30/2526462.html][http_www.cnblogs.com_mayixue_archive_2012_05_30_2526462.html]

原作在：

源码下载：[Win8\_style\_web\_start\_page\_and\_config.rar][Win8_style_web_start_page_and_config.rar]

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

示例代码：[Win8StartScreen.rar][]

但是打不开。

==============================================

我们来稍分析一下：

script.js是核心源文件。

$(document).ready(function()\{  
var num = numberOfScreens; //这里从源信息中，得到几个页面。目前是3个

for(var i=1;i<=num;i++)\{  
$('\#name'+i).html(blockName\[i\]);  
\}

\--------------------------------------------------

$('\#name'+i).html(blockName\[i\]); 意思如下：

html模板中，

那blockName在

source.js中

blockName\[1\] = '第1个页面标题';  
blockName\[2\] = '第2个页面标题';  
blockName\[3\] = '第3个页面标题';

执行完后变成：

<div id="name1">第1个页面标题</div>

当然，调用的是jquery库。

=========================

if(hoverEffect)\{  
for(i=1;i<=num;i++)\{  
$('<style>\#wrapper'+i+' div:hover\{border: 1px \#fff solid;box-shadow: 0px 0px 5px \#fff;margin-left:4px;margin-top:4px;\}</style>').appendTo('head');  
\};  
\};  
//这几句话是把wrapper的风格，以css类的方式，写入到head中去

[http_www.fishc.com]: http://www.fishc.com/
[http_www.cnblogs.com_mayixue_archive_2012_05_30_2526462.html]: http://www.cnblogs.com/mayixue/archive/2012/05/30/2526462.html
[Win8_style_web_start_page_and_config.rar]: http://files.cnblogs.com/mayixue/Win8_style_web_start_page_and_config.rar
[http_www.mayixue.com_demo_win8page_index.htm]: http://www.mayixue.com/demo/win8page/index.htm
[Win8StartScreen.rar]: http://files.cnblogs.com/mayixue/Win8StartScreen.rar