用纯Javascript实现Windows 8 Metro风格

地铁风格设计的主要特点：1。Windows 8 Metro风格设计，实现网站或系统功能导航；2.纯Javascript实现；3.支持IE、360、Chrome等所有常用浏览器；4.支持圆角、阴影、换卡等特效；5.支持卡片放大、缩小、增删等功能；6.卡片背景颜色、背景图片、卡片图片、卡片文字的定制；7.可选切换卡之间的Metro风格截图。

麦德龙部分算法卡片显示部分代码：复制代码代码如下： str=' Li data-mode=' flip ' id=' ItemID ' ' data-sizex=' 1 ' data-sizey=' 1 ' class=' style div 2 ' style=' float : left；left : ' left ' pxtop : ' top ' pxwidth : ' add width ' px health ' px背景-color : ' backColor '；位置：绝对；z索引：2;光标：指针指针；边界半径：5像素；box-shadow:0 4px 10px rgba(0，0，0，35);行为： URL(' IMgbasepath ' js/ie)。HTC)；onMouseOver=' show option(this)' ' onMouseOut=' hiddeOption(this)'；str=' div style=' float:left位置：绝对；left :0 pxtop :0 px width : ' add width ' pxheath : ' add height ' px背景-颜色：橙色；/div '；str=' div style=' float:left位置：绝对；left :0 pxtop :0 px width : ' add width ' pxheath : ' add height ' px背景色：红色；/div '；str='/Li '；移动单元格射流研究…脚本：复制代码代码如下：函数moveItem(objid，indexList){ //判断是否有效移动var curItem=getCurItem(objid)；var curIndex=curitem . index for(var I=0；iindexlist . lentii){ var miIndex=parsent(索引列表[I])；if((curIndex 1)==miIndex(curIndex 1)% colSize==0){ alertInfo('最后一列不能调大！');返回false } if(miIndex=(RowSize * colSize)){ alertInfo('不能超过三行！');返回false } var cell num=GetItemCellnum(MiIndex)；if(cellnum！=1){ alertInfo('被移动单元格目前只支持一个单元格！');返回false} } //判断是否超过所规定显示区域var null num=0；var Nullindexarray=new Array()；for(var I=0；iitemarray . lengthi){ var tmpItem=item array[I]；var obj value=tmpitem . value if(itemvalueforspace==obj value | | itemvalueforull==obj value){ var isexit area=false；for(var j=0；jindex list . length j){ var miIndex=parsent(索引列表[j])；if(I==miIndex){ isexit area=true；打破；} } nullnum=nullnum 1；if(！isexit area){ Nulindexarray。推(我)；} } } if((项数组。length-nullnum索引列表。长度)(行大小*列大小)){ alertInfo('调大单元格已超出所显示区域！');返回false} //调整移动单元格的队列for(var I=0；iindexlist . lengthi){ var miIndex=parsent(索引列表[I])；var move item=item数组[miIndex]；if(moveItem==undefined){//不存在for(var j=ItemArray。长度；j=miIndexj){ addNullitem(' ')；} move item=item数组[miIndex]；}//未定义的var移动值=移动项目。价值；移动项目。value=curitem。价值；项目数组[miIndex]=移动项目；if(moveValue！=itemvalueforspace){//覆盖单元格中已有对象。//覆盖单元格移到最后var moveIndex=item array . length var col=moveIndex % colSizevar row=(moveIndex-col)/colSize；var moveLeft=拆分空间col *(init width拆分空间)；var moveTop=拆分空间行*(init height拆分空间)；var moveCacheItem=new Object()；movecacheitem . index=moveIndexmovecacheitem。id=项目前缀(moveIndex 1)；move cacheitem . x=moveleftmovecacheitem . y=movetopmovecacheitem . value=movevalue item数组。push(moveCacheItem)；var moveObj=文档。getelementbyid(移动值)；移动物体。风格。top=moveTop ' px移动物体。风格。left=moveLeft ' px}else{//null单元格，需要删除空单元格//del(moveitem。id)；} } //检查空缺单元格，如果存在，就填充空对象for(var I=ItemArray。长度-1；I=(RowSize * ColSize)；I-){ var movitem=item array[I]；var nulitemIndex=NulAnDexarray[NulAnDexarray。长度-1]；定义变量审案=ItemArray[NuLiteMinDex]；var moveObj=文档。getelementbyid(movitem。值)；//控制台。日志(' id=' movitem。id '//value=' movie tem。值'/top=' nu审案。y '/left=' nu审案。x’)；移动物体。风格。top=ParSeint(nu审案。y)' px '；移动物体。风格。left=ParSeint(nu审案。x)' px '；//控制台。日志(' null id=' nu审案。id '/move id=' movie tem。id '/value=' movie tem。值'/top=' nu审案。y '/left=' nu审案。x’)；getElement(sortablecurid).移除子元素(GetElement(nu审案。id))；数字审案。=movitem.valueitem数组[NuLiteMinDex]=Numeagle；项目数组。pop()；null indexarray。pop()；} printItemArray()；返回真；} 待续……