Implement Windows 8 Metro style with pure Javascript

Main features of Metro Style Design

1. The Windows 8 Metro style design enables navigation of website or system functions

2. Pure Javascript implementation

3. Support all common browsers such as IE, 360, and Chrome

4. Supports special effects such as rounded corners, shadows, and Card Switching

5. Support card zoom-in, zoom-out, add, and delete Functions

6. You can customize the background color, background image, card image, and card text of a card.

7. Any switch between cards

Metro Style
 
Metro Algorithm

Code for card display:
Copy codeThe Code is as follows:
Str = '<li data-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: 0 4px 10px rgba (0, 0, 0 ,. 35); behavior: url ('+ imgBasePath +' js/ie. htc); "onMouseOver =" showOption (this) "onMouseOut =" hiddeOption (this) "> ';
Str + = '<div style = "float: left; position: absolute; left: 0px; top: 0px; width:' + addwidth + 'px; height: '+ addheight + 'px; background-color: orange; "> </div> ';
Str + = '<div style = "float: left; position: absolute; left: 0px; top: 0px; width:' + addwidth + 'px; height: '+ addheight + 'px; background-color: red; "> </div> ';
Str + = '</li> ';

Mobile cell JS script:
Copy codeThe Code is as follows:
Function moveItem (objid, indexList ){
// Determine whether to move effectively.
Var curItem = getCurItem (objid );
Var curIndex = curItem. index;
For (var I = 0; I <indexList. length; I ++ ){
Var miIndex = parseInt (indexList [I]);
If (curIndex + 1) = miIndex & (curIndex + 1) % colSize = 0 ){
AlertInfo ("the last column cannot be increased! ");
Return false;
}
If (miIndex> = (rowSize * colSize )){
AlertInfo ("cannot exceed three lines! ");
Return false;
}
Var cellnum = getItemCellNum (miIndex );
If (cellnum! = 1 ){
AlertInfo ("Currently, only one cell can be moved! ");
Return false;
}
}
// Determine whether the specified display area is exceeded
Var nullnum = 0;
Var nullIndexArray = new Array ();
For (var I = 0; I <itemArray. length; I ++ ){
Var tmpItem = itemArray [I];
Var objvalue = tmpItem. value;
If (itemvalueforspace = objvalue | itemvaluefornull = objvalue ){
Var isexitarea = false;
For (var j = 0; j <indexList. length; j ++ ){
Var miIndex = parseInt (indexList [j]);
If (I = miIndex ){
Isexitarea = true;
Break;
}
}
Nullnum = nullnum + 1;
If (! Isexitarea ){
NullIndexArray. push (I );
}
}
}
If (itemArray. length-nullnum + indexList. length)> (rowSize * colSize )){
AlertInfo ("the size of the cell exceeds the displayed area! ");
Return false;
}
// Adjust the queue of the mobile cell.
For (var I = 0; I <indexList. length; I ++ ){
Var miIndex = parseInt (indexList [I]);
Var moveItem = itemArray [miIndex];
If (moveItem = undefined) {// does not exist.
For (var j = itemArray. length; j <= miIndex; j ++ ){
AddNullItem ("");
}
MoveItem = itemArray [miIndex];
}
// Undefined
Var moveValue = moveItem. value;
MoveItem. value = curItem. value;
ItemArray [miIndex] = moveItem;
If (moveValue! = Itemvalueforspace) {// overwrite existing objects in the cell.
// Overwrite the cell and move it to the end
Var moveIndex = itemArray. length;
Var col = moveIndex % colSize;
Var row = (moveIndex-col)/colSize;
Var moveLeft = splitspace + col * (initwidth + splitspace );
Var moveTop = splitspace + row * (initheight + splitspace );
Var moveCacheItem = new Object ();
MoveCacheItem. index = moveIndex;
MoveCacheItem. id = itemPrefix + (moveIndex + 1 );
MoveCacheItem. x = moveLeft;
MoveCacheItem. y = moveTop;
MoveCacheItem. value = moveValue;
ItemArray. push (moveCacheItem );
Var moveObj = document. getElementById (moveValue );
MoveObj. style. top = moveTop + "px ";
MoveObj. style. left = moveLeft + "px ";
} Else {// null cell. Delete the null cell.
// Del (moveItem. id );
}

}

// Check the vacant cells. If yes, the null object is filled.
For (var I = itemArray. length-1; 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;
}

To be continued ......