地铁造型设计的主要特点

1、windows 8 Metro风格设计，实现网站导航或系统功能。

2。纯Javaｓｃｒｉｐｔ实现

三.支持所有IE，360，Chrome和其他常用浏览器

4。支持特殊效果，如圆角、阴影、卡片切换等。

5。放大、缩小、添加、删除等功能。

6。可以自定义卡片的背景颜色、背景图片、卡片图片、卡片文本。

7。卡片可以任意交换。

地铁风格截图
地铁部分算法

该卡显示代码的一部分：
复制代码代码如下所示：
=；
=；
=；
=；

手机js脚本：
复制代码代码如下所示：
功能移动道具（objId，indexlist）{
判断运动的有效性。
无功curitem = getcuritem（objId）；
无功curindex = curitem.index；
对于（var i = 0；i < indexlist.length；i++）{
无功miindex = parseInt（indexlist {我}）；
如果（（curindex + 1）= = miindex（curindex + 1）% colsize = = 0）{
AlertInfo（最后一列不能大！；
返回false；
}
如果（miindex > =（rowsize * colsize））{
AlertInfo（不超过三行！；
返回false；
}
无功cellnum = getitemcellnum（miindex）；
如果（cellnum！= 1）{
AlertInfo（手机目前只支持1细胞！；
返回false；
}
}
确定是否超过预定的显示区域。
无功nullnum = 0；
无功nullindexarray =新的数组（）；
对于（var i = 0；i < itemarray.length；i++）{
无功tmpitem =把{我}；
无功objvalue = tmpitem.value；
如果（itemvalueforspace = = objvalue | | itemvaluefornull = = objvalue）{
无功isexitarea = false；
对于（var j = 0；J < indexlist.length；j++）{
无功miindex = parseInt（indexlist {，}）；
如果（我= = miindex）{
isexitarea =真；
打破；
}
}
nullnum = nullnum + 1；
如果（！isexitarea）{
NullIndexArray.push（我）；
}
}
}
如果（（听nullnum + indexlist。长度。长度）>（rowsize * colsize））{
AlertInfo（大细胞已超出显示区域！；
返回false；
}
调整移动单元格队列。
对于（var i = 0；i < indexlist.length；i++）{
无功miindex = parseInt（indexlist {我}）；
把miindex } { var移动道具=；
如果（移动道具= = undefined）{ / /不存在。
对于（var j = itemarray.length；J <= miindex；j++）{
addnullitem（）；
}
移动道具=听miindex } {；
}
未定义
风险转移价值= moveitem.value；
价值= curitem.value移动道具；
听miindex } = {移动道具；
如果（转移价值！= itemvalueforspace）{ / /细胞存在对象覆盖。
移动到最后一个单元格/覆盖
无功moveindex = itemarray.length；
VaR col = moveindex % colsize；
无功行=（moveindex COL） / colsize；
var = splitspace +西*向左移动（initwidth + splitspace）；
无功movetop = splitspace +行*（initheight + splitspace）；
无功movecacheitem =新的对象（）；
movecacheitem。指数= moveindex；
movecacheitem。ID = itemprefix +（moveindex + 1）；
movecacheitem x =向左移动；
movecacheitem y = movetop；
movecacheitem价值=转移价值；
ItemArray.push（movecacheitem）；
无功moveobj = document.getelementbyid（转移价值）；
moveobj。风格。最高movetop +PX；
moveobj。风格。左=向左移动+PX；
}否则，您需要删除null单元格。
/ / del（移动道具。ID）；
}

}

检查是否有空/单元格，它填充空对象。
对于（var i = itemarray.length-1；我> =（rowsize * colsize）；我--）{
无功movitem =把{我}；
无功nulitemindex = nullindexarray { nullindexarray length-1 }；
无功nulitem =听nulitemindex } {；
无功moveobj = document.getelementbyid（movitem。值）；
/ / console.log（id =+ movitem。ID + / /价值=+ movitem。价值+ / /顶=+ nulitem。Y + / /左=+ nulitem X。）；
moveobj。风格。= parseInt（nulitem。Y）+PX；
moveobj。风格。左= parseInt（nulitem。x）+PX；
/ / console.log（nullid =+ nulitem。ID + / / moveid =+ movitem。ID + / /价值=+ movitem。价值+ / /顶=+ nulitem Y + 。 / /左=+ nulitem X）；
getelement（sortablecurid）。RemoveChild（getelement（nulitem。ID））；
nulitem价值= movitem.value；
听nulitemindex } = { nulitem；
ItemArray.pop（）；
NullIndexArray.pop（）；
}

PrintItemArray（）；
返回true；
}

待续……