純Javascript實(shí)現(xiàn)Windows 8 Metro風(fēng)格實(shí)現(xiàn)
1.Windows 8 Metro風(fēng)格設(shè)計(jì),實(shí)現(xiàn)網(wǎng)站或系統(tǒng)功能的導(dǎo)航
2.純Javascript實(shí)現(xiàn)
3.支持所有IE、360、Chrome等常用瀏覽器
4.支持圓角、陰影、卡片切換等特效
5.支持卡片的放大、縮小、增加、刪除等功能
6.可自定義卡片背景色、背景圖片、卡片圖片、卡片文字
7.卡片間可任意切換
Metro風(fēng)格截圖

Metro部分算法
卡片顯示部分代碼:
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+';position: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>';
移動(dòng)單元格JS腳本:
function moveItem(objid,indexList){
//判斷是否有效移動(dòng).
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("最后一列不能調(diào)大!");
return false;
}
if(miIndex>=(rowSize*colSize)){
alertInfo("不能超過三行!");
return false;
}
var cellnum=getItemCellNum(miIndex);
if(cellnum!=1){
alertInfo("被移動(dòng)單元格目前只支持1個(gè)單元格!");
return false;
}
}
//判斷是否超過所規(guī)定顯示區(qū)域
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("調(diào)大單元格已超出所顯示區(qū)域!");
return false;
}
//調(diào)整移動(dòng)單元格的隊(duì)列.
for(var i=0;i<indexList.length;i++){
var miIndex=parseInt(indexList[i]);
var moveItem=itemArray[miIndex];
if(moveItem==undefined){//不存在.
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){//覆蓋單元格中已有對象.
//覆蓋單元格移到最后
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單元格,需要?jiǎng)h除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+"http://value="+movitem.value+"http://top="+nulitem.y+"http://left="+nulitem.x);
moveObj.style.top=parseInt(nulitem.y)+"px";
moveObj.style.left=parseInt(nulitem.x)+"px";
//console.log("nullid="+nulitem.id+"http://moveid="+movitem.id+"http://value="+movitem.value+"http://top="+nulitem.y+"http://left="+nulitem.x);
getElement(sortablecurid).removeChild(getElement(nulitem.id));
nulitem.value=movitem.value;
itemArray[nulitemIndex]=nulitem;
itemArray.pop();
nullIndexArray.pop();
}
printItemArray();
return true;
}
待續(xù)……
相關(guān)文章
調(diào)用innerHTML之后onclick失效問題的解決方法
調(diào)用innerHTML之后,onclick失效了,這也是在意料之中的,因?yàn)閕nnerHTML是以文本形式插入的button,所以無法識別onclick事件2014-01-01webpack常用構(gòu)建優(yōu)化策略小結(jié)
這篇文章主要介紹了webpack常用構(gòu)建優(yōu)化策略小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10JS實(shí)現(xiàn)橫向與豎向兩個(gè)選項(xiàng)卡Tab聯(lián)動(dòng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)橫向與豎向兩個(gè)選項(xiàng)卡Tab聯(lián)動(dòng)的方法,涉及JavaScript遍歷及動(dòng)態(tài)修改頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(上)
這篇文章主要為大家詳細(xì)介紹了HTML5+Canvas,和jquery技術(shù),調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04JavaScript中的Window.open()用法示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中Window.open()用法的相關(guān)資料,今天在項(xiàng)目中用到了彈出子窗口,就想到了用JavaScript實(shí)現(xiàn)的兩種方法,其中一個(gè)就是window.open(),需要的朋友可以參考下2023-07-07js函數(shù)定時(shí)器實(shí)現(xiàn)定時(shí)讀取系統(tǒng)實(shí)時(shí)連接數(shù)
這篇文章主要介紹了使用js函數(shù)定時(shí)器實(shí)現(xiàn)定時(shí)讀取系統(tǒng)實(shí)時(shí)連接數(shù),需要的朋友可以參考下2014-04-04