管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js模仿windows桌面图标排列算法具体实现(附图)

　　注：需要引入Jquery

　　如果需要全部功能，请引入jquery-ui和jquery-ui.css

　　截图：

js模仿windows桌面图标排列算法具体实现(附图)

　　js代码：

　　

复制代码 代码如下:

　　$(function() {

　　//菜单列表

　　var menu_list=$(".menu-list");

　　//工作区

　　var working=$(".working");

　　working.click(function() {

　　menu_list.hide();

　　$(".content-menu").hide("slow");

　　});

　　//菜单图标单击

　　$(".menu").bind("click",function() {

　　menu_list.show();

　　});

　　arrange();

　　$(window).resize(function() {

　　arrange();

　　});

　　//屏蔽右键菜单

　　$(document).contextmenu(function() {

　　return false;

　　});

　　//点击工作区的时候 显示右键菜单

　　$(".working").contextmenu(function(event) {

　　var x=event.clientX;

　　var y=event.clientY;

　　var menu=$(".content-menu");

　　//判断坐标

　　var width=document.body.clientWidth;

　　var height=document.body.clientHeight;

　　x=(x+menu.width())>=width?width-menu.width():x;

　　y=(y+menu.height())>=height-40?height-menu.height():y;

　　//alert("可视高度："+height+",鼠标高度："+y);

　　menu.css("top",y);

　　menu.css("left",x);

　　menu.show();

　　});

　　//content-menu

　　$(".content-menu ul li").click(function() {

　　var text=$(this).text();

　　switch (text) {

　　case "刷新":

　　document.location.reload();

　　break;

　　case "退出登录":

　　if(confirm("是否要退出登录？")){

　　}

　　break;

　　default:

　　break;

　　}

　　$(".content-menu").hide();

　　});

　　});

　　//排列图标部分

　　function arrange(){

　　var ul=$(".icons");

　　var working=$(".working");

　　//位置坐标

　　var position={x:0,y:0,bottom:110,width:50,height:50,parent:{height:0,width:0},padding:{top:10,left:10,right:0,bottom:10}};

　　position.parent.height=working.height()-40;

　　position.parent.width=working.width();

　　ul.find("li").each(function(index) {

　　$(this).css("top",position.y+"px");

　　$(this).css("left",position.x+"px");

　　position.height=$(this).height();

　　position.width=$(this).width();

　　position.y=position.y+position.height+position.padding.bottom+position.padding.bottom;

　　if(position.y>=position.parent.height-position.bottom){

　　position.y=0;

　　position.x=position.x+position.width+position.padding.left;

　　}

　　});

　　}

　　html代码：

　　

复制代码 代码如下:

　　<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">

　　<html>

　　<head>

　　<title>index.html</title>

　　<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

　　<meta http-equiv="description" content="this is my page">

　　<meta http-equiv="content-type" content="text/html; charset=GBK">

　　<link rel="stylesheet" type="text/css" href="css/window.css">

　　<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">

　　<script language="JavaScript" src="js/jquery-1.10.0.js"></script>

　　<script language="JavaScript" src="js/jquery-ui.js"></script>

　　<script language="JavaScript" src="js/window.js"></script>

　　</head>

　　<body>

　　<div class="working">

　　<ul class="icons">

　　<script>

　　for (var i = 1; i <= 4; i++) {

　　var html = "";

　　html += '<li>';

　　html += '<img src="images/'+i+'.gif">';

　　html += '<div class="text">图标'+i+'</div>';

　　html += '</li>';

　　document.write(html);

　　}

　　</script>

　　</ul>

　　</div>

　　<div class="taskbar">

　　<div class="menu-list">

　　<ul>

　　<li></li>

　　</ul>

　　</div>

　　<div class="menu">

　　<div class="menu-icon">

　　<ul><li></li><li></li><li></li><li></li></ul>

　　</div>

　　<a href="javascript:;"></a>

　　</div>

　　</div>

　　<div class="window" title="窗体">窗体</div>

　　<div class="content-menu">

　　<ul>

　　<li><a href="javascript:;">刷新</a></li>

　　<li><a href="javascript:;">设置</a></li>

　　<hr/>

　　<li><a href="javascript:;">帮助</a></li>

　　<hr/>

　　<li><a href="javascript:;">关于</a></li>

　　<hr/>

　　<li><a href="javascript:;">系统设置</a></li>

　　<li><a href="javascript:;">退出登录</a></li>

　　</ul>

　　</div>

　　<script>

　　$(".icons li").mousemove(function(){

　　$(this).addClass("icons-move");

　　});

　　$(".icons li").mouseout(function(){

　　$(this).removeClass("icons-move");

　　});

　　$(".icons li").mousedown(function(){

　　$(".icons li").removeClass("icons-focus");

　　$(this).addClass("icons-focus");

　　//改变当前的索引

　　$(".icons li").css("z-index",0);

　　$(this).css("z-index",1);

　　});

　　$(".icons li").dblclick(function(){

　　alert("double click");

　　});

　　//按键事件

　　$(document).keyup(function(event){

　　var UP=38;

　　var DOWM=40;

　　var ENTER=13;

　　var elem=$(".icons-focus");

　　if(elem.html()=="undefined")return;

　　if (event.keyCode == UP) {

　　$(".icons li").removeClass("icons-focus");

　　elem.prev().addClass("icons-focus");

　　}

　　if(event.keyCode==DOWM){

　　$(".icons li").removeClass("icons-focus");

　　elem.next().addClass("icons-focus");

　　}

　　//回车打开选中的图标

　　if(event.keyCode==ENTER){

　　var open=$(".icons-focus");

　　alert("ok enevt is enter");

　　}

　　});

　　//图标拖拽

　　$(".icons li").draggable();

　　//注册resize事件

　　$(".window").draggable({containment: 'parent'});

　　$(".window").resizable({containment: 'parent'});

　　</script>

　　</body>

　　</html>

　　CSS代码：

　　

复制代码 代码如下:

　　@CHARSET "UTF-8";

　　body, html {

　　overflow: hidden;

　　height: 100%;

　　width: 100%;

　　margin: 0px;

　　padding: 0px;

　　}

　　.working {

　　height: 100%;

　　width: 100%;

　　background-image: url("../images/untitled.png");

　　background-repeat: no-repeat;

　　background-color: rgb(235, 236, 238);

　　padding: 20px;

　　}

　　.working ul {

　　height: 100%;

　　position: relative;

　　}

　　.working ul li {

　　position: absolute;

　　display: block;

　　width: 90px;

　　height: 90px;

　　text-align: center;

　　margin: 0px 10px 10px 10px;

　　float: left;

　　border: inherit 1px inherit;

　　overflow: hidden;

　　cursor: pointer;

　　}

　　.taskbar {

　　position: absolute;

　　height: 35px;

　　line-height: 35px;

　　width: 100%;

　　bottom: 0px;

　　background-color: #CCC;

　　z-index: 999;

　　filter: alpha(opacity = 80);

　　opacity: 0.8;

　　padding: 0px 10px;

　　}

　　.menu {

　　display: block;

　　width: 50px;

　　height: 30px;

　　float: left;

　　}

　　.menu-list {

　　position: absolute;

　　left: 0px;

　　bottom: 35px;

　　width: 350px;

　　height: 500px;

　　border: #CCC 1px solid;

　　background-color: white;

　　filter: alpha(opacity = 90);

　　opacity: 0.9;

　　border-radius: 5px;

　　display: none;

　　}

　　ul {

　　margin: 0px;

　　padding: 0px;

　　}

　　.menu-icon {

　　cursor: pointer;

　　}

　　.menu-icon ul li {

　　display: block;

　　width: 15px;

　　height: 15px;

　　float: left;

　　margin: 1px;

　　background-color: white;

　　border-radius: 3px;

　　}

　　.menu-icon:hover li {

　　background-color: red;

　　}

　　.icons li img {

　　max-height: 70px;

　　max-width: 90px;

　　}

　　.text {

　　position: static;

　　height: 20px;

　　line-height: 20px;

　　width: 100%;

　　margin: 0px;

　　font-size: 12px;

　　font-family: 微软雅黑;

　　color: white;

　　}

　　.icons-move {

　　border: rgb(161, 194, 219) 1px solid;

　　background-color: rgb(194, 208, 226);

　　filter: alpha(opacity = 60);

　　opacity: 0.6;

　　border-radius: 3px;

　　}

　　.icons-focus {

　　border: rgb(161, 194, 219) 1px solid;

　　background-color: rgb(194, 208, 226);

　　filter: alpha(opacity = 100);

　　opacity: 1;

　　border-radius: 3px;

　　}

　　.window {

　　height: 200px;

　　width: 200px;

　　border: #CCC 1px solid;

　　background-color: white;

　　border-radius: 5px;

　　position: absolute;

　　top: 0px;

　　z-index: 10;

　　}

　　/*

　　* 右键菜单

　　*/

　　.content-menu {

　　position: absolute;

　　width: 150px;

　　height: auto;

　　background-color: rgb(255, 255, 255);

　　border: #CCC 1px solid;

　　display: none;

　　border-radius:5px;

　　z-index:999;

　　}

　　.content-menu ul {

　　margin: 0px;

　　padding: 0px;

　　}

　　.content-menu ul li {

　　list-style: none;

　　line-height: 30px;

　　height: 30px;

　　margin: 3px 0px;

　　padding:0px;

　　font-size: 13px;

　　}

　　.content-menu ul li a{

　　text-decoration:none;

　　display:block;

　　font-family: 微软雅黑;

　　padding:0px 5px;

　　width:140px;

　　height:100%;

　　color: #333;

　　outline:none;

　　}

　　.content-menu ul li a:hover {

　　background-color: #DDD;

　　}

　　.content-menu ul hr {

　　margin: 1px 0px;

　　height: 0px;

　　border: 0px;

　　border-bottom: #CCC 1px solid;

　　}

教程首页 更多教程