js实现div拖动功能

作者:林炜贤来源:www.163css.com发表时间:(2010-12-18)

关于js可以实现的功能有哪些?最常见的应该是隐藏显示功能了,滚动功能也很常见,经常用来实现图片文字跑动。

我今天要向介绍的是js的拖动功能,我们通过move函数实现div在x轴y轴方向的移动。像这样的功能应用最常见是在“许愿墙”动画了,用户写上评论,在许愿墙上显示祝福语,你可以移动div,从而看到更多祝福语。

在我今天介绍的这个动画里,我定义了6个div,通过绝对定位实现6个div有序排列。onMouseDown="move(this,event);通过这个函数,我实现了当鼠标放到div上时,触发move函数,从而为div加上移动事件,这样,我拖动鼠标,div就可以移动了。

今天介绍的这个动画,用来学习是很不错的,js代码也很简单。 a.style.left=(d.clientX-b)+"px";这是实现div在横向的功能。a.style.top=(d.clientY-c)+"px";这是实现div在纵向移动的功能。

简单吧。以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.com/hihilinxuan/cssjs/201012/jsdrag/index.html

下载地址:js实现div拖动功能.rar

返回作者主页:www.163css.com阅读 (17004)
更多 1