原创地址：

Metro风格设计主要特点

1.Windows8Metro风格设计，实现网站或系统功能的导航

2.纯Javascript实现

3.支持所有IE、360、Chrome等常用浏览器

4.支持圆角、阴影、卡片切换等特效

5.支持卡片的放大、缩小、增加、删除等功能

6.可自定义卡片背景色、背景图片、卡片图片、卡片文字

7.卡片间可任意切换

Metro风格截图

SouthEast

Metro部分算法

卡片显示部分代码：

[javascript]

  1. str='<lidata-mode="flip"id="'+itemID+'"data-sizex="1"data-sizey="1"class="stylediv2"style="float:left;left:'+left+'px;top:'+top+'px;width:'+addwidth+'px;height:'+addheight+'px;background-color:'+backColor+';position:absolute;z-index:2;cursor:pointer;border-radius:5px;box-shadow:04px10pxrgba(0,0,0,.35);behavior:url('+imgBasePath+'js/ie.htc);"onMouseOver="showOption(this)"onMouseOut="hiddeOption(this)">';

  2. str+='<divstyle="float:left;position:absolute;left:0px;top:0px;width:'+addwidth+'px;height:'+addheight+'px;background-color:orange;"></div>';

  3. str+='<divstyle="float:left;position:absolute;left:0px;top:0px;width:'+addwidth+'px;height:'+addheight+'px;background-color:red;"></div>';

  4. str+='</li>';

str='
  • ';str+='
          
    ';str+='
          
    ';str+='
    • ';

    移动单元格JS脚本：

    [javascript]

    1. functionmoveItem(objid,indexList){

    2. //判断是否有效移动.

    3. varcurItem=getCurItem(objid);

    4. varcurIndex=curItem.index;

    5. for(vari=0;i<indexList.length;i++){

    6. varmiIndex=parseInt(indexList[i]);

    7. if((curIndex+1)==miIndex&&(curIndex+1)%colSize==0){

    8. alertInfo("最后一列不能调大！");

    9. returnfalse;

    10. }

    11. if(miIndex>=(rowSize*colSize)){

    12. alertInfo("不能超过三行！");

    13. returnfalse;

    14. }

    15. varcellnum=getItemCellNum(miIndex);

    16. if(cellnum!=1){

    17. alertInfo("被移动单元格目前只支持1个单元格！");

    18. returnfalse;

    19. }

    20. }

    21. //判断是否超过所规定显示区域

    22. varnullnum=0;

    23. varnullIndexArray=newArray();

    24. for(vari=0;i<itemArray.length;i++){

    25. vartmpItem=itemArray[i];

    26. varobjvalue=tmpItem.value;

    27. if(itemvalueforspace==objvalue||itemvaluefornull==objvalue){

    28. varisexitarea=false;

    29. for(varj=0;j<indexList.length;j++){

    30. varmiIndex=parseInt(indexList[j]);

    31. if(i==miIndex){

    32. isexitarea=true;

    33. break;

    34. }

    35. }

    36. nullnum=nullnum+1;

    37. if(!isexitarea){

    38. nullIndexArray.push(i);

    39. }

    40. }

    41. }

    42. if((itemArray.length-nullnum+indexList.length)>(rowSize*colSize)){

    43. alertInfo("调大单元格已超出所显示区域！");

    44. returnfalse;

    45. }

    46. //调整移动单元格的队列.

    47. for(vari=0;i<indexList.length;i++){

    48. varmiIndex=parseInt(indexList[i]);

    49. varmoveItem=itemArray[miIndex];

    50. if(moveItem==undefined){

      //不存在.

    51. for(varj=itemArray.length;j<=miIndex;j++){

    52. addNullItem("");

    53. }

    54. moveItem=itemArray[miIndex];

    55. }

    56. //undefined

    57. varmoveValue=moveItem.value;

    58. moveItem.value=curItem.value;

    59. itemArray[miIndex]=moveItem;

    60. if(moveValue!=itemvalueforspace){

      //覆盖单元格中已有对象.

    61. //覆盖单元格移到最后

    62. varmoveIndex=itemArray.length;

    63. varcol=moveIndex%colSize;

    64. varrow=(moveIndex-col)/colSize;

    65. varmoveLeft=splitspace+col*(initwidth+splitspace);

    66. varmoveTop=splitspace+row*(initheight+splitspace);

    67. varmoveCacheItem=newObject();

    68. moveCacheItem.index=moveIndex;

    69. moveCacheItem.id=itemPrefix+(moveIndex+1);

    70. moveCacheItem.x=moveLeft;

    71. moveCacheItem.y=moveTop;

    72. moveCacheItem.value=moveValue;

    73. itemArray.push(moveCacheItem);

    74. varmoveObj=document.getElementById(moveValue);

    75. moveObj.style.top=moveTop+"px";

    76. moveObj.style.left=moveLeft+"px";

    77. }else{

      //null单元格，需要删除null单元格.

    78. //del(moveItem.id);

    79. }

    80. }

    81. //检查空缺单元格，如果存在，就填充null对象.

    82. for(vari=itemArray.length-1;i>=(rowSize*colSize);i--){

    83. varmovitem=itemArray[i];

    84. varnulitemIndex=nullIndexArray[nullIndexArray.length-1];

    85. varnulitem=itemArray[nulitemIndex];

    86. varmoveObj=document.getElementById(movitem.value);

    87. //console.log("id="+movitem.id+"//value="+movitem.value+"//top="+nulitem.y+"//left="+nulitem.x);

    88. moveObj.style.top=parseInt(nulitem.y)+"px";

    89. moveObj.style.left=parseInt(nulitem.x)+"px";

    90. //console.log("nullid="+nulitem.id+"//moveid="+movitem.id+"//value="+movitem.value+"//top="+nulitem.y+"//left="+nulitem.x);

    91. getElement(sortablecurid).removeChild(getElement(nulitem.id));

    92. nulitem.value=movitem.value;

    93. itemArray[nulitemIndex]=nulitem;

    94. itemArray.pop();

    95. nullIndexArray.pop();

    96. }

    97. printItemArray();

    98. returntrue;

    99. }

    function moveItem(objid,indexList){	//判断是否有效移动.	var curItem=getCurItem(objid);	var curIndex=curItem.index;		for(var i=0;i
         
          =(rowSize*colSize)){			alertInfo("不能超过三行！");			return false;		}		var cellnum=getItemCellNum(miIndex);		if(cellnum!=1){			alertInfo("被移动单元格目前只支持1个单元格！");			return false;		}	}	//判断是否超过所规定显示区域	var nullnum=0;	var nullIndexArray=new Array();	for(var i=0;i
          
           (rowSize*colSize)){		alertInfo("调大单元格已超出所显示区域！");		return false;	}	//调整移动单元格的队列.	for(var i=0;i
           
            =(rowSize*colSize);i--){		var movitem=itemArray[i];		var nulitemIndex=nullIndexArray[nullIndexArray.length-1];		var nulitem=itemArray[nulitemIndex];		var moveObj=document.getElementById(movitem.value);		//console.log("id="+movitem.id+"//value="+movitem.value+"//top="+nulitem.y+"//left="+nulitem.x);		moveObj.style.top=parseInt(nulitem.y)+"px";		moveObj.style.left=parseInt(nulitem.x)+"px";		//console.log("nullid="+nulitem.id+"//moveid="+movitem.id+"//value="+movitem.value+"//top="+nulitem.y+"//left="+nulitem.x);		getElement(sortablecurid).removeChild(getElement(nulitem.id));		nulitem.value=movitem.value;		itemArray[nulitemIndex]=nulitem;		itemArray.pop();		nullIndexArray.pop();	}		printItemArray();	return true;}

    待续……