Pure Javascript implements Windows 8 Metro style implementation_javascript skills

Main features of Metro style design

1. Windows 8 Metro style design to realize navigation of website or system functions

2. Pure Javascript implementation

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

4. Supports special effects such as rounded corners, shadows, and card switching

5. Supports functions such as enlarging, reducing, adding, and deleting cards.

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

7. You can switch between cards at will

Metro style screenshots

Metro part algorithm

Card display part code:

Copy code The code is as follows:

str='

';
str ='

';
str ='

';
str ='

';

Move cell JS script:

Copy code The code is as follows:

function moveItem(objid,indexList){
//Determine whether the move is valid.
var curItem=getCurItem(objid);
var curIndex=curItem.index;
for( var i=0;ivar miIndex=parseInt(indexList[i]);
if((curIndex 1)==miIndex&&(curIndex 1)%colSize==0) {
alertInfo("The last column cannot be enlarged!");
return false;
}
if(miIndex>=(rowSize*colSize)){
alertInfo("Cannot exceed three OK! ");
return false;
}
var cellnum=getItemCellNum(miIndex);
if(cellnum!=1){
alertInfo("The moved cell currently only supports 1 cell! ");
return false;
}
}
//Determine whether the specified display area is exceeded
var nullnum=0;
var nullIndexArray=new Array ();
for(var i=0;ivar tmpItem=itemArray[i];
var objvalue=tmpItem.value;
if(itemvalueforspace= =objvalue||itemvaluefornull==objvalue){
var isexitarea=false;
for(var j=0;jvar 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 enlarged cell exceeds the displayed area! ");
return false;
}
//Adjust the queue of moving cells.
for(var i=0;ivar 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 the existing object in the cell.
//Move the overwritten cell Finally
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 cells, null cells need to be deleted.
//del(moveItem .id);
}

}

//Check the vacant cells, and if they exist, fill in the null object.
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...