순수 Javascript는 Windows 8 Metro 스타일 구현_javascript 기술을 구현합니다.

Metro 스타일 디자인의 주요 특징

1. 웹 사이트 탐색이나 시스템 기능을 구현하는 Windows 8 Metro 스타일 디자인

2. 순수 Javascript 구현

3. IE, 360, Chrome 등 일반 브라우저 모두 지원

4. 둥근 모서리, 그림자, 카드 전환 등 특수 효과 지원

5. , 카드 추가 및 삭제

6. 카드 배경색, 배경 이미지, 카드 텍스트를 맞춤 설정할 수 있습니다

7. 카드 간 전환이 가능합니다
.
Metro 스타일 스크린샷

Metro 부품 알고리즘

카드 디스플레이 부품 코드:

코드 복사 코드는 다음과 같습니다.

str='

';
str ='

';
str ='

';
str ='< /li>';

셀 이동 JS 스크립트:

코드 복사 코드는 다음과 같습니다. :

function moveItem(objid,indexList){
//이동이 유효한지 확인합니다.
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("마지막 열은 확대할 수 없습니다!");
return false
}
if(miIndex>=(rowSize*colSize)){
alertInfo(" 3개를 초과할 수 없습니다. OK!");
return false;
}
var cellnum=getItemCellNum(miIndex);
if(cellnum!=1){
alertInfo("현재 이동된 셀 1개의 셀만 지원합니다!");
return false;
}
}
//지정된 표시 영역을 초과했는지 확인
var nullnum=0;
var nullIndexArray=new 배열();
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;
nullIndexArray.push(i);
}
}
}
if((itemArray.length-nullnum indexList.length)>(rowSize*colSize)){
alertInfo ( "확대된 셀이 표시된 영역을 초과합니다! ");
return false;
}
//이동 셀의 대기열을 조정합니다.
for(var i=0;ivar miIndex= parseInt(indexList[i]);
var moveItem=itemArray[miIndex];
if(moveItem==undefine){//존재하지 않습니다.
for(var j=itemArray.length;j< = miIndex;j ){
addNullItem("");
}
moveItem=itemArray[miIndex];
//정의되지 않음
var moveValue=moveItem.value; 🎜 >moveItem.value=curItem.value;
itemArray[miIndex]=moveItem;
if(moveValue!=itemvalueforspace){//셀의 기존 개체를 덮어씁니다.
//덮어쓴 셀을 이동합니다. 마지막으로
var moveIndex=itemArray.length;
var col=moveIndex%colSize;
var row=(moveIndex-col)/colSize
var moveLeft=splitspace col*(initwidth Splitspace); 🎜>var moveTop=splitspace row*(intheight Splitspace);
var moveCacheItem=new Object();
moveCacheItem.index=moveIndex;
moveCacheItem.id=itemPrefix(moveIndex 1); .x=moveLeft;
moveCacheItem.value=moveValue;
itemArray.push(moveCacheItem)
var moveObj=document.getElementById(moveObj) .style.top=moveTop "px";
moveObj.style.left=moveLeft "px";
}else{//null 셀, null 셀을 삭제해야 합니다.
//del(moveItem .id);

}

//빈 셀을 확인하고 존재하는 경우 null 개체를 채웁니다.
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
}


계속됩니다. ..