Pure Javascript は Windows 8 Metro スタイルの実装_JavaScript スキルを実装します-jsチュートリアル-php.cn

Pure Javascript は Windows 8 Metro スタイルの実装_JavaScript スキルを実装します

WBOY

リリース： 2016-05-16 17:19:53

オリジナル

1268 人が閲覧しました

Metro スタイルデザインの主な特徴

1. Web サイトまたはシステム機能のナビゲーションを実現する Windows 8 Metro スタイルデザイン

2. Pure Javascript の実装

3. IE、360、Chrome などのすべての一般的なブラウザをサポートします

4. 角丸、影、カード切り替えなどの特殊効果をサポートします

5. 拡大、縮小などの機能をサポートします。、カードの追加、削除

6. カードの背景色、背景画像、カードのテキストをカスタマイズできます

7. カードを自由に切り替えることができます。
メトロスタイルのスクリーンショット

Pure Javascript は Windows 8 Metro スタイルの実装_JavaScript スキルを実装します

Pure Javascript は Windows 8 Metro スタイルの実装_JavaScript スキルを実装します

メトロパートアルゴリズム

カード表示パートコード:

コードをコピーコードは次のとおりです。

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 つを超えることはできません。 "); 
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]; 
if(itemvalueforspace; = =objvalue||itemvaluefornull==objvalue){ 
var isexitarea=false; 
for(var j=0;jvar miIndex=parseInt(indexList[j] ) ; 
if(i==miIndex){ 
isexitarea=true; 
} 
} 
nullnum=nullnum 1; 
nullIndexArray.push(i); 
} 
} 
} 
if((itemArray.length-nullnumindexList.length)>(rowSize*colSize)){ 
alertInfo ( 「拡大されたセルが表示領域を超えています! "); 
return false; 
} 
//移動セルのキューを調整します。
for(var i=0;ivar miIndex= parseInt(indexList[i]); 
var moveItem=itemArray[miIndex]; 
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 moveLeft=splitspace col*(initwidth splitspace); 🎜>var moveTop=splitspace row*(initheight splitspace); 
var moveCacheItem=new Object(); 
moveCacheItem.id=itemPrefix (moveIndex 1); .x=moveLeft; 
moveCacheItem.value=moveValue; 
var moveObj=document.getElementById(moveValue); .style.top=moveTop "px"; 
moveObj.style.left=moveLeft "px"; 
}else{//null セルは削除する必要があります。 .id); 
} 

} 

//空のセルが存在する場合は、null オブジェクトを埋めます。 -1; i>=(rowSize*colSize);i--){ 
var movitem=itemArray[i]; 
var nulitemIndex=nullIndexArray[nullIndexArray.length-1]; [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) " "; 
//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 
} 

 
続きます。 ..