Pure JavaScript implements Windows 8 Metro style implementation _javascript skills

main features of metro style design

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

2. Pure JavaScript implementation

3. Support all IE, 360, chrome and other popular browsers

4. Support for corners, shadows, card switching and other effects

5. Support cards to enlarge, reduce, add, delete and other functions

6. Customizable card background color, background picture, card picture, card text

7. The card can be arbitrarily switched between

Metro Style screenshot

Metro Part algorithm

The card shows part of the code:

Copy Code code 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+ ';p osition: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> ';

Move cell JS script:

Copy Code code 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 adjusted!") ");
return false;
}
if (miindex>= (rowsize*colsize)) {
Alertinfo ("No more than three lines!") ");
return false;
}
var cellnum=getitemcellnum (Miindex);
if (cellnum!=1) {
Alertinfo (the moved cell currently supports only 1 cells!) ");
return false;
}
}
Judge whether or not to exceed the specified display area
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 has exceeded the displayed area!") ");
return false;
}
Adjusts the queues for moving cells.
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) {//Overwrites an existing object in the cell.
Overwrite cell move to last
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, you need to delete the null cell.
Del (moveitem.id);
}

}

Check for vacant cells and, if present, populate 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;
}

Cond......