win8风格（metro）主页的学习



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

觉得不错。

所以，研究了一下。

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

http://www.cnblogs.com/mayixue/archive/2012/05/30/2526462.html

原作在：

源码下载：Win8_style_web_start_page_and_config.rar

改造后的示例：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模板中，

<div id="name1"></div>

那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中去

<style>#wrapper1 div:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;margin-left:4px;margin-top:4px;}</style>