如何制作类似msn(QQ)等网页中的拖动效果(二)

转载 2006年06月05日 20:52:00
 
 如何制作类似msn(QQ)等网页中的拖动效果(二)

如何制作类似msn(QQ)等网页中的拖动效果(一)http://blog.csdn.net/BlueDestiny/archive/2006/05/25/755189.aspx

因为篇幅原因,所以得分开来写,这些层次也清晰一些

接着上面的讲。

我们按照上面的思路来一步步的写代码

一、关于坐标event.clientX和event.clientY,而为什么不用event.x和event.y,以后我会写清楚,其实已经写好了的。看情况我就会贴出来。转入正题吧,看看参考
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

二、得到拖动物件的坐标。即得到绝对坐标,用以下代码。参数e为拖动物件对象,使用函数时传入。返回的是对象的X坐标、Y坐标、宽度、长度的数组关联。而为什么还要用迭代求offsetLeft和offsetTop呢?因为他们是相对于父坐标而言的,所以必须通过循环来得到绝对定位。
 function Offset(e) {
  var t = e.offsetTop;
  var l = e.offsetLeft;
  var w = e.offsetWidth;
  var h = e.offsetHeight;
  while(e=e.offsetParent) {
   t+=e.offsetTop;
   l+=e.offsetLeft;
  }
  return { t:t, l:l, w:w, h:h }
 };

三、用事件触发程序句柄。
obj.onmouseover=function() {
//to do; never-online Demo
};
obj.onmousedown=function() {
//to do; never-online Demo
}
obj.onmousemove=function() {
//to do; never-online Demo
}
obj.onmouseup=function() {
//to do; never-online Demo
}

四、拖动时得到坐标。
obj.onmousedown=function() {
//当按下时记住原始坐标。never-online Demo
obj.X = event.clientX - Offset(obj).l;
obj.Y = event.clientY - Offset(obj).t;
}
obj.onmousemove=function() {
新坐标减去旧坐标得到当前位置 never-online Demo
obj.style.left = event.clientX - obj.X;
obj.style.top = event.clientY - obj.Y;
}

五、看看完整的简单拖动层代码吧。

查看高亮代码
第三节将讲述如何一步步的完善拖动层代码。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=755249

相关文章推荐

教你作类似msn(QQ)等网页中窗口的拖动效果

现在很流行用javascript脚本来制作这些东西,下面我也多写几句方面大家理解怎么样一步步的去制作自己想要的东西。还有编码的思想。 当看到这些效果的时候,应该结合自己所知道的知识去想是怎么样实...

C#实现 类似 qq、 msn 的 任务栏通知窗口

想必大部分网友都使用过QQ、MSN等聊天程序,它们的界面都相当华丽,尤其是当网友上线以及消息提示时会有一个浮动的窗体从屏幕的右下方缓慢升起,既美观又人性化,作为程序员在享受的同时我们也不禁要问:这到底...
  • e_wsq
  • e_wsq
  • 2012年02月12日 22:20
  • 447

页面右下角弹出类似QQ或MSN的消息提示(JQuery版)

实例下载:V1.0 主函数如下: (function(){       var ua=navigator.userAgent.toLowerCase();       va...

类似MSN右下角提示的窗口效果

类似MSN提示的页面效果-html5中文学习网www.htm15.com 看到右下角的提示了吗?如果没有看到,刷新一下 window.onload = getMsg; win...

【转】MSN,QQ在线即时交谈网页代码

MSN,QQ在线即时交谈网页代码 关键字: msn, qq在线即时交谈网页代码  想让你的msn和QQ一样可以生成在线交谈状态吗?试试这个代码吧?也许会有一点帮助哦。当然,这个代码只是抛砖引玉,如...
  • shaoz
  • shaoz
  • 2011年10月05日 14:50
  • 456

在网页中加入新版QQ、MSN在线状态代码的方法

http://www.xianzhixianjue.com/?p=11840 很多企业、网店、以及中小站长通常都需要在网站或网页上加入一些联系方式,比如常见的QQ、MSN等等。而大家比较注重的通常是...
  • wyqlxy
  • wyqlxy
  • 2011年08月26日 10:08
  • 1999

在网页嵌入QQ+MSN+淘宝旺旺+Gtalk快速对话框官方代码的方法

如何在网页中实现单击链接弹出对话窗口 http://www.baidu.com/s?bs=%CD%F8%D2%B3%D6%D0+%B5%A5%BB%F7%D2%BB%CF%C2qq%BE%CD%CD...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何制作类似msn(QQ)等网页中的拖动效果(二)
举报原因:
原因补充:

(最多只允许输入30个字)