純Javascript實作Windows 8 Metro風格實作_javascript技巧-js教程-PHP中文網

純Javascript實作Windows 8 Metro風格實作_javascript技巧

WBOY

發布： 2016-05-16 17:19:53

原創

1258 人瀏覽過

Metro風格設計主要特點

1.Windows 8 Metro風格設計，實現網站或系統功能的導航

2.純Javascript實現

3 .支援所有IE、360、Chrome等常用瀏覽器

4.支援圓角、陰影、卡片切換等特效

5.支援卡片的放大、縮小、增加、刪除等功能

6.可自訂卡片背景色、背景圖片、卡片圖片、卡片文字

7.卡片間可任意切換

Metro風格截圖
純Javascript實作Windows 8 Metro風格實作_javascript技巧

純Javascript實作Windows 8 Metro風格實作_javascript技巧

Metro部分演算法

卡片顯示部分程式碼：

複製程式碼程式碼如下

str=''; 
str ='
'; 
str ='
'; 
str ='
'; 

行動單元格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("不能超過三行！ "); 
return false; 
} 
var cellnum=getItemCellNum(miIndex); 
if(cellnum!=1){ 
alertInfo("被移動單元格目前只支援1個單元格！ (); 
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("調大單元格已超出所顯示區域！ "); 
return false; 
} 
//調整移動單元格的隊列. 
for(var i=0;ivar miIndex= parseInt(indexList[i]); 
var moveItem=itemArray[miIndex]; 
if(moveItem==undefined){//不存在. 
for(var j=itemArray.length;jaddNullItem(""); 
} 
moveItem=itemArray[miIndex]; 
} 
//undefined 
var moveValue=moveItem; >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 🎜>var moveTop=splitspace row*(initheight splitspace); 
var moveCacheItem=new Object(); 
moveCacheItem.index=moveIndex; 
moveCacherefix.id=itemac.index=moveIndex; 
moveCacherefix.id=itemache.index=moveIndex; 
moveCacherefix.id=itemache.index=moveIndex; 
moveCacherefix.id=itemache.index=moveIndex; 
moveCacherefix。 .x=moveLeft; 
moveCacheItem.y=moveTop; 
moveCacheItem.value=moveValue; 
itemArray.push(moveCacheItem); 
var moveObjjdocument.get .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 litenum ; 
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。 ; 
nullIndexArray.pop(); 
} 

printItemArray(); 
return true; 
} 

 
待續…