纯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 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
vue数组对象排序的实现代码
Jun 20 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python中random模块用法实例分析
2015/05/19 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
使用python实现生成用户信息
2017/03/20 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python 字典的打印实现
2019/09/26 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python中entry用法讲解
2020/12/04 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
golang 在windows中设置环境变量的操作
2021/04/29 Golang
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python深度学习之实现卷积神经网络
2021/06/05 Python
Go Plugins插件的实现方式
2021/08/07 Golang
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Python序列化模块JSON与Pickle
2022/06/05 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript