以前造访过一个网站:http://www.fishc.com/
觉得不错。
所以,研究了一下。
源码下载: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>