纯Javascript实现Windows 8 Metro风格实现


Posted in Javascript onOctober 15, 2013

Metro风格设计主要特点

1.Windows 8 Metro风格设计,实现网站或系统功能的导航

2.纯Javascript实现

3.支持所有IE、360、Chrome等常用浏览器

4.支持圆角、阴影、卡片切换等特效

5.支持卡片的放大、缩小、增加、删除等功能

6.可自定义卡片背景色、背景图片、卡片图片、卡片文字

7.卡片间可任意切换

Metro风格截图
纯Javascript实现Windows 8 Metro风格实现 
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>';

移动单元格JS脚本:
function moveItem(objid,indexList){ 
//判断是否有效移动. 
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("最后一列不能调大!"); 
return false; 
} 
if(miIndex>=(rowSize*colSize)){ 
alertInfo("不能超过三行!"); 
return false; 
} 
var cellnum=getItemCellNum(miIndex); 
if(cellnum!=1){ 
alertInfo("被移动单元格目前只支持1个单元格!"); 
return false; 
} 
} 
//判断是否超过所规定显示区域 
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("调大单元格已超出所显示区域!"); 
return false; 
} 
//调整移动单元格的队列. 
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单元格,需要删除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 true; 
}

待续……
Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
Axios取消重复请求的方法实例详解
Jun 15 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 #Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 #Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 #Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 #Javascript
JS操作Cookies的小例子
Oct 15 #Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 #Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 #Javascript
You might like
php intval的测试代码发现问题
2008/07/27 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
set在python里的含义和用法
2019/06/24 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
新员工欢迎词
2014/01/12 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
基层工作经验证明样本
2014/11/16 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android