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

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

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

2. Pure Javascript の実装

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

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

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

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

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

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

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

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

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
}


続きます。 ..

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。