jQuery實現的自定義可以拖動的彈出層效果

antzone發表於2017-03-28
jQuery

關於彈出層效果，在網頁製作中使用頻率非常的高，有js內建的，當然也可以進行人為定製。

自然，人為定製的彈出層效果更加美觀，也更加靈活，可以根據網站的風格進行製作，下面通過程式碼例項介紹一個，可以隨意拖動的自定義彈出層效果。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding: 0px;
}
.dragBox{
  width:400px;
  height:200px;
  position:absolute;
  top:40%;
  left:40%;
  background:#e8e8e8;
  z-index:8001;
}
.dragBox>div{
  height:30px;
  cursor:move;
  background:#00ff21;
  position:relative;
}
.ui-mask{
  width:100%;
  height:100%;
  background:#000;
  position:absolute;
  top:0px;
  z-index:8000;
  opacity:0.4;
  filter:Alpha(opacity=40);
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  var mouseOffx = 0;
  var mouseOffy = 0;
  var isDrag = false;
  $(".dragBox div:eq(0)").on("mousedown", function (ev) {
    mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;
    mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top;
    isDrag = true;
  })
  $(document).on("mousemove", function (ev) {
    var mourseX = ev.clientX, mourseY = ev.clientY;
    var moveX = 0, moveY = 0;
    if (isDrag === true) {
      moveX = mourseX - mouseOffx;
      moveY = mourseY - mouseOffy;
      var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false);
      var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false);
      moveX = Math.min(maxX, Math.max(0, moveX));
      moveY = Math.min(maxY, Math.max(0, moveY));
      $(".dragBox").css({ "margin-top": 0, "margin-left": 0});
      $(".dragBox").css({ "left": moveX, "top": moveY });
    }
  });
  $(document).on("mouseup", function () {
    isDrag = false;
  });
});
</script>
</head>
<body>
<div class="ui-mask" id="mask"></div>
<div class="dragBox">
  <div></div>
</div>
</body>
</html>

上面的程式碼實現實現彈出層效果的主要核心功能，比如拖動、居中和背景半透明，關於點選彈出或者關閉這些細枝末節都已經省略，下面對此效果的實現過程。

一.程式碼註釋:

1.$(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.var mouseOffx = 0,宣告一個變數並賦初值為0，用來存放滑鼠按下的位置距離元素左邊緣的距離。

3.var mouseOffy = 0,宣告一個變數兵賦初值為0，用來存放滑鼠按下的位置距離元素上邊緣的距離。

4.var isDrag = false,宣告一個變數兵賦初值為false，用來標示彈出層是否可以拖動。

5.$(".dragBox div:eq(0)").on("mousedown", function (ev){}，為class屬性值下面的第一個div元素註冊mousedown事件處理函式。

6.mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left,獲取滑鼠按下的位置距離元素左邊緣的距離。

7.mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top,獲取滑鼠按下的位置距離元素上邊緣的距離。

8.isDrag = true，將標識設定為true，標識彈出曾是可以拖動的。

9.$(document).on("mousemove", function (ev){}，為document註冊mousemove事件處理函式，之所以將其註冊在document之上，而飛彈出層之上，是為了防止在拖動過程中滑鼠劃出的現象。

10.var mourseX = ev.clientX, mourseY = ev.clientY,分別獲取滑鼠指標在文件區域的座標。

11.var moveX = 0, moveY = 0，宣告兩個變數兵賦初值為0，分別用來存放彈出曾的left和top值。

12.if (isDrag === true){}，判斷是否可以拖動。

13.moveX = mourseX - mouseOffx，獲取left值。

14.moveY = mourseY - mouseOffy，獲取top值。

15.var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false)，獲取left屬性值的最大值。

16.var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false)，獲取top屬性值的最大值。

17.moveX = Math.min(maxX, Math.max(0, moveX))，獲取最終的left值，可以防止彈出層超出瀏覽器客戶的左右邊界。

18.moveY = Math.min(maxY, Math.max(0, moveY))，獲取最終的top值，可以防止彈出層超出瀏覽器客戶區的上下邊界。

19.$(".dragBox").css({ "margin-top": 0, "margin-left": 0})，將外邊據重置為0，否則會發生不正常偏移。20.$(".dragBox").css({ "left": moveX, "top": moveY })，設定left和top屬性值。

21.$(document).on("mouseup", function () {isDrag = false;})，當滑鼠鬆開，那麼就將彈出層設定為不可拖動。

二.相關閱讀:

1.:eq可以參閱jQuery :eq()一章節。

2.clientX可以參閱javascript clientX一章節。

3.offset()可以參閱jQuery offset()一章節。

4.outerWidth()可以參閱jQuery outerWidth()一章節。

5.Math.min()可以參閱javascript Math.min()一章節。

6.Math.max()可以參閱javascript Math.max()一章節。

7.css()可以參閱jQuery css()一章節。

8.on()可以參閱jquery on()一章節。

相關文章