js代码:
首页 > web前端 > js教程 > 正文

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

WBOY
发布: 2016-05-16 17:32:07
原创
1456 人浏览过

注:需要引入Jquery
如果需要全部功能,请引入jquery-ui和jquery-ui.css
截图:
js模仿windows桌面图标排列算法具体实现(附图)_javascript技巧 
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代码:
复制代码 代码如下:




index.html
















    <script> <BR>for (var i = 1; i <= 4; i++) { <BR>var html = ""; <BR>html += '<li>'; <BR>html += '<img src="images/'+i+'.gif" alt="js模仿windows桌面图标排列算法具体实现(附图)_javascript技巧" >'; <BR>html += '<div class="text">鍥炬爣'+i+'</script>
';
html += '';
document.write(html);
}














绐椾綋


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板