纯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 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
Angular排序实例详解
Jun 28 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
MooTools 1.2介绍
2009/09/14 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
对于Python中RawString的理解介绍
2016/07/07 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
八年级生物教学反思
2014/01/22 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
安全承诺书格式
2014/05/21 职场文书
ktv好的活动方案
2014/08/17 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
先进班组事迹材料
2014/12/25 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
党委工作总结2015
2015/04/27 职场文书
小孩不笨观后感
2015/06/03 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书