本文介绍了一个简单的仿Windows菜单实现方案，当点击头像时显示菜单，并在点击页面其他区域时隐藏菜单。通过JavaScript实现了菜单的显示与隐藏及鼠标位置判断。
首先呢，其实这并不是一个项目需要的东西，但是朋友要，就帮他做了下~在做的时候，知识也巩固了下~收获还是不小的
介绍：这是一个模范windos的菜单，当你点击头像时，会出现一个菜单，这个菜单你随意操作了，但当你点击其他地方时，此菜单会消失，听起来好简单哦。。不过确实不难，还是自己技术菜~！
<script type="text/javascript">
function list(){ // 显示list菜单
document.getElementById("list").style.display="";
}
function back(){ // 隐藏list菜单
document.getElementById("list").style.display="none";
}
function get(){ //这是一个鼠标的定位，,x,y分别为横坐标和纵坐标~！！
var x=window.event.x;
var y=window.event.y;
if (x>=12 && x<=96 && y>=15 && y<=145){ //判断鼠标的位置，做相应的操作 ，这4个数值是可以通过自己手动测试得到的
}else {
back();
}
}
</script>
---------------------------------这是3个script函数操作~！----------
<style type="text/css">
.a1 { border:1px #999; background-color:white; color: #87CEFA} //a1类常态
.a1:hover { border:1px gold;background-color:#87CEFA;color: white} //特定鼠标移到该类时,a1类的状态
</style>
<body onclick="get()">
<div id="head" style="display:block">
<input type="button" value="头像" onclick="list()" />
</div>
<div id="list" style="display:none;" >
<table border="4px" bordercolor="#4B0082" cellpadding="1" >
<tr>
<td><a class="a1" href="" style="text-decoration: none">增加好友"</a></td>
</tr>
<tr>
<td><a class="a1" href="" style="text-decoration: none">增加好友"</a></td>
</tr><tr>
<td><a class="a1" href="" style="text-decoration: none">增加好友"</a></td>
</tr><tr>
<td><a class="a1" href="" style="text-decoration: none">增加好友"</a></td>
</tr>
</table>
</div>
</body>
-------------------------------------------------------------------------------------------------------------
感觉学页面也蛮好玩的哦~！不过现在可是css+div+flash的时代。
------------------------------------------------------------------------------------------------------------
对了，项目的感受还是很深的，昨天从早上9：00坐到机房，除了午饭，一口气写到傍晚6点。自己都不知道自己居然有这么好的定力，
不过说了也不好，最后头脑相当的晕，简单的思路跳跃，也会出现错误。细心，认真都不知道丢哪去了~导致最后错误好多，可今天下午一去，没用半个小时，就通通解决，那种感觉好爽~！ 原来，清醒的头脑居然效率这么高~！
想起，过去搞竞赛的日子，比赛一天，每做完一题，都会出去走走，然后再回来，调整状态。 做项目也一样，不要死做，调整自身状态才是最重要的。 好的感觉，效率自然就高~！
------------------------------项目加油，第一不远了~(～ o ～)~zZ---------------------------------
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
