纯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 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
自定义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
超级简单的发送邮件程序
2006/10/09 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php检查页面是否被百度收录
2015/10/28 PHP
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
基于python实现简单日历
2018/07/28 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Python异常处理机制结构实例解析
2020/07/23 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
贷款担保书范文
2014/05/13 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
信用卡工资证明范本
2015/06/19 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android
MySQL深分页问题解决思路
2022/12/24 MySQL