• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery拖拽的弹出层效果代码实例

jQuery 程序员 2年前 (2019-03-28) 284次浏览 已收录 0个评论

分享一段代码实例,它实现了点击按钮弹出一个层的功能,并且可以使用鼠标拖动层的移动。

代码实例如下:

弹出的层可以进行拖动效果并且在窗口中居中,下面介绍一下实现过程。

一.代码注释:

(1).var _x,_y,声明两个变量,用来存储坐标值。

(2).var _move=false,声明一个变量,并赋值为false,用来标识弹出层是否可以拖动。

(3).$(document).ready(function(){}),文档结构完全加载完毕再去执行函数中的代码。

(4).$(“#show”).click(function(event){}),为id属性值为show的元素注册click事件处理函数。

(5).var str=”蚂蚁部落欢迎您”,声明一个字符串作为显示的内容。

(6).$(“#txt”).html(str),将字符串写入id属性值为txt的元素中。

(7).var wid = $(window).width(),获取窗口的宽度。

(8).var hei = $(window).height(),获取窗口的高度。

(9).var left = (wid – 400)/2+”px”,设置弹出窗口的left属性值,可以让弹出窗口水平居中。

(10).var top = (hei – 200)/2+”px”,设置弹出窗口的top属性值,可以让弹出窗口垂直居中。

(11).$(“#dialog”).css({}),设置弹窗口的一些样式属性。

(12).$(“#close”).click(function(event){}),为关闭按钮注册click事件处理函数。

(13).$(“#dialog”).slideUp(“slow”),将弹出框收起,也就是隐藏弹出框。

(14).$(“#dialog”).mousedown(function(e){}),为id属性值为dialog的元素注册mousedown事件处理函数。

(15)._move=true,将变量的值设置为true,用以标识弹出窗口是可以拖动的。

(16)._x=e.pageX-parseInt($(“#dialog”).css(“left”)),获取当鼠标按下时,鼠标指针距离弹出窗口左边缘的距离。

(17)._y=e.pageY-parseInt($(“#dialog”).css(“top”)),获取当鼠标按下时,鼠标指针距离弹出窗口上边缘的距离。

(18).$(document).mousemove(function(e){}),为document对象注册mousemove事件处理函数,之所以要注册在document上而不是弹出层上,这样可以利用事件冒泡现象防止鼠标指针移出弹出层后,导致拖动无效的情况。

(19).if(_move),判断是否可以拖动。

(20).var x=e.pageX-_x,获取拖动过程中弹出层的left属性值。

(21).var y=e.pageY-_y,获取拖动过程中弹出层的top属性值。

(22).$(“#dialog”).css({top:y,left:x}),设置left和top属性值。

(23).mouseup(function(){_move=false;}),为弹出层注册mouseup事件处理函数,当鼠标松开的时候,将_move变量值设置为false,也就是不能够拖动了,当然这里使用是链式调用方式。


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址