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

转载 2006年06月05日 20:53:00

现在很流行用javascript脚本来制作这些东西,下面我也多写几句方面大家理解怎么样一步步的去制作自己想要的东西。还有编码的思想。

当看到这些效果的时候,应该结合自己所知道的知识去想是怎么样实现的,当然这里实现的方法不是唯一的。每个人都有自己的思路,当想到的时候就自己主动的编码试一下。

这个系列文章第一部分,首先从最简单的拖动开始说起,有不懂的朋友可以留言。

简单的拖动DIV的主要编程思路:

1、应该了解拖动,首先即是坐标。也就是说,要了解DHTML里面的坐标的属性。这里我们用的是event.clientX和event.clientY,即鼠标相对于边距X的距离和Y的距离。如果有不明白的,可以去查阅相关资料,这里不再赘述。

2、如何得到拖动对的的坐标呢?可以用offsetTop和offsetLeft来得到,属性我也不再多说,请查阅DHTML参考。

3、应该有大致的思路了吧,用什么事件来触发拖动的句柄呢?当然可以用ondrag的事件,但是不太可取。也不太利于以后为兼容而做的准备工作。那还有什么事件可以用?仔细想想,拖动时会触发什么事件,一、当鼠标移上对象时。二、鼠标按下。三鼠标移动。四、鼠标放开。这几个也就是那几个事件。即对应的onmouseover、omousedown、onmousemove、onmouseup事件。

4、如何计算坐标?我的思路是这样的:一,鼠标按下时,记得拖动物件的相对坐标。二、拖动时捕获对象,并实时得到坐标,用当前的坐标减去原始坐标,得到新的坐标,并把拖动物件的left和top设置为当前的X和Y坐标。三、鼠标放开时,释放所有的对象。

5、开始编码。

 



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

相关文章推荐

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

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

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

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

页面右下角弹出类似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
  • 440

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

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

如何在网页HTML中嵌入QQ、MSN、旺旺、Gtalk快速对话框代码

1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将123456换成你的号码,site后面换成你的网站就可以了)...
  • ysghyy
  • ysghyy
  • 2011-10-11 11:42
  • 2550
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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