快捷导航
蚂蚁部落 网站首页 实例代码 jQuery实例 查看内容

jQuery拖拽的弹出层效果

2018-1-9 14:33| 发布者: admin| 查看: 522| 评论: 0|来自: 蚂蚁部落

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#show{
  width:100px;
  height:30px;
  line-height:30px;
  margin:0px auto;
  background-color:red;
}
#dialog{
  display:none;
  padding:8px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var _move=false;
var _x,_y;
$(document).ready(function(){
  $("#show").click(function(event){
    var str="蚂蚁部落欢迎您";
    $("#txt").html(str);
    var wid = $(window).width();
    var hei = $(window).height();
 
    var left = (wid - 400)/2+"px";
    var top = (hei - 200)/2+"px";
 
    $("#dialog").css({
      "z-index":"5",
      "position":"absolute",
      "display":"block",
      "width":"400px",
      "height":"200px",
      "left":left,
      "top":top,
      "background":"#EEEEEE",
      "color":"red",
      "border":"1px solid red"
    })
  })
   
  $("#close").click(function(event){
    $("#dialog").slideUp("slow");
  })
 
  $("#dialog").mousedown(function(e){
    _move=true;
    _x=e.pageX-parseInt($("#dialog").css("left"));
    _y=e.pageY-parseInt($("#dialog").css("top"));
  });
   
  $(document).mousemove(function(e){
    if(_move){
      var x=e.pageX-_x;
      var y=e.pageY-_y;
      $("#dialog").css({top:y,left:x});
    }
  }).mouseup(function(){
    _move=false;
  });
});
</script>
</head>
<body>
<div id="show">点击弹出层</div>
<div id="dialog">
  <div id="txt"></div>
  <br/>
  <div style="text-align:right;padding-right:50px;">
    <input id='close' type="button" value="关闭此弹出层">
  </div>
</div>
</body>
</html>

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

一.代码注释:

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

二.相关阅读:

(1).html()参阅jQuery html()一章节。

(2).width()参阅jQuery width()一章节。 

(3).height()参阅jQuery height()一章节。 

(4).css()参阅jQuery css()一章节。

(5).click事件参阅jQuery click事件一章节。

(6).slideUp()参阅jQuery slideUp()一章节。 

(7).mousedown参阅jQuery mousedown事件一章节。 

(8).pageX属性参阅jQuery event.pageX一章节。 

(9).parseInt()参阅javascript parseInt()一章节。 

(10).mouseup事件参阅jQuery mouseup事件一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-23 15:51 , Processed in 0.093591 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部