纯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 30 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
js实现打字小游戏
Dec 17 Javascript
一篇文章学会Vue中间件管道
Jun 20 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
PHPMailer邮件发送的实现代码
2013/05/04 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
npm qs模块使用详解
2020/02/07 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
python中的多重继承实例讲解
2014/09/28 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
keras之权重初始化方式
2020/05/21 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python代码如何注释
2020/06/01 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
年度献血先进个人事迹材料
2014/02/14 职场文书
《乌塔》教学反思
2014/02/17 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书