如何制作类似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

android开发之仿QQ拖拽界面效果(侧滑面板)

仿QQ拖拽界面效果(侧滑面板),我们一般继承Layout,不会直接去继承ViewGroup,而是继承FrameLayout,为什么五大布局我们偏偏只继承FrameLayout呢? 第一,FrameLa...
  • zz1175854992
  • zz1175854992
  • 2015年05月11日 21:37
  • 1558

【iOS效果集】实现QQ消除小红点(一键退朝)效果

QQ上黏黏的小红点很好玩有木有,于是自己也想实现一番,看到iOS实现的人比较少,Android的比较多,于是这个就用iOS来实现哈~ 效果图: 调试图: 其实从实现来讲,我是先实现第二...
  • XieYupeng520
  • XieYupeng520
  • 2016年01月28日 14:23
  • 3587

高仿QQ聊天消息列表的下拉刷新效果

转载请注明出处: 一、下拉刷新的原理:
  • u011513914
  • u011513914
  • 2015年06月13日 19:39
  • 1447

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

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

C# WPF Taskbar Notifier 类似QQ/MSN迅雷 状态栏提示消息的效果

  • 2017年10月13日 10:53
  • 58KB
  • 下载

类似QQ消息淡出淡进的网页卡片效果程序

  • 2009年09月16日 11:50
  • 11.74MB
  • 下载

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

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

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

实例下载:V1.0 主函数如下: (function(){       var ua=navigator.userAgent.toLowerCase();       va...
  • yushijie
  • yushijie
  • 2011年08月12日 13:42
  • 1658

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

类似MSN提示的页面效果-html5中文学习网www.htm15.com 看到右下角的提示了吗?如果没有看到,刷新一下 window.onload = getMsg; win...
  • feilongjian001
  • feilongjian001
  • 2012年07月27日 21:57
  • 335

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

1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将123456换成你的号码,site后面换成你的网站就可以了)...
  • shaoz
  • shaoz
  • 2011年10月05日 14:53
  • 682
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何制作类似msn(QQ)等网页中的拖动效果(一)
举报原因:
原因补充:

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