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

  • 内容
  • 评论
  • 相关

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

代码实例如下:

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

一.代码注释:

(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,也就是不能够拖动了,当然这里使用是链式调用方式。

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery拖拽的弹出层效果代码实例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注