注：需要引入Jquery
如果需要全部功能，请引入jquery-ui和jquery-ui.css
截图：
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="/UploadFiles/2021-04-02/jquery-1.10.0.js"><script language="JavaScript" src="js/jquery-ui.js"><script language="JavaScript" src="/UploadFiles/2021-04-02/window.js"></head>
<body>
<div class="working">
<ul class="icons">
<script>
for (var i = 1; i <= 4; i++) {
var html = "";
html += '<li>';
html += '<img src="/UploadFiles/2021-04-02/'+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;
}
如果需要全部功能，请引入jquery-ui和jquery-ui.css
截图：
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="/UploadFiles/2021-04-02/jquery-1.10.0.js"><script language="JavaScript" src="js/jquery-ui.js"><script language="JavaScript" src="/UploadFiles/2021-04-02/window.js"></head>
<body>
<div class="working">
<ul class="icons">
<script>
for (var i = 1; i <= 4; i++) {
var html = "";
html += '<li>';
html += '<img src="/UploadFiles/2021-04-02/'+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;
}
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“js模仿windows桌面图标排列算法具体实现(附图)”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。