不知道大家有没有上过周博通这个网站 my.potu.com/
上面的面板可以自由拖拽和隐藏关闭 很酷的效果 不过都是模仿国外的哈
最近看了很多这种类似的站点 比如MS的http://www.start.com/
发现有一个趋势 就是用户自定义的东西越来越多 并且越来越高级
就是所谓的web2.0吧 不过话又说回来 在中国要想推行这样的风潮 可能还要过段时间
因为中国大多数网民的文化层次还不到这个水平
闲话不多说了 给大家介绍一下我写的这个程序 看了效果以后模仿的 不过还是有很多bug哈 比起那些站点来差太远了 仅给大家提供一点点参考 说得不对的地方大家多多指正哦
首先介绍一下这个程序的一些相关事件和方法：
event.button：事件发生时表示鼠标的动作 如果为1则是鼠标左键 2为鼠标右键 不过现在好像MS都已经有8个值了 难道以后鼠标的发展方向是8个键？
parentNode：父节点
event.ClientX：事件发生时的鼠标x值
event.ClientY：事件发生时的鼠标Y值
setCapture()方法：建立对象和鼠标之间的通讯 也就是说鼠标作用在此对象上时才跟踪鼠标
releaseCapture()方法：切断对象和鼠标之间的通讯
javascript程序如下：
===========================================
<script>
var move=false;
function StartDrag(obj) //定义准备拖拽的函数
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")//判断事件发生地点 防止无效拖拽
{
obj.setCapture(); //对当前对象的鼠标动作进行跟踪
obj.style.background="#999"; //改变颜色
move=true;
}
}
function Drag(obj) //定义拖拽函数
{
if(move)
{
var oldwin=obj.parentNode; //定义父对象
oldwin.style.left=event.clientX-50;//定义父对象目前位置
oldwin.style.top=event.clientY-10;
}
}
function StopDrag(obj) //定义停止拖拽函数
{
obj.style.background="#000"; //改变颜色
obj.releaseCapture(); //停止对当前对象的鼠标跟踪
move=false;
}
</script>
===========================================
查看效果：
<html>
<body>
<style>
body{font-family:Verdana;font-size:11px;color:#333;}
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor:hand;}
</style>
<script>
var move=false;
function StartDrag(obj)
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
{
obj.setCapture();
obj.style.background="#999";
move=true;
}
}
function Drag(obj)
{
if(move)
{
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-50;
oldwin.style.top=event.clientY-10;
}
}
function StopDrag(obj)
{
obj.style.background="#000";
obj.releaseCapture();
move=false;
}
</script>
<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
This is a moveable window.<br>
Moreinfo in www.achome.cn .
</div>
</body>
</html>
效果演示：
联系客服
