簡單的彈出拖拽窗口（一）

時間 2019-11-08

標籤簡單彈出窗口简体版

原文原文鏈接

需求說明：javascript

1，點擊頁面按鈕，彈出窗口；css

2，要有半透明背景遮罩；html

3，彈出窗口圓角，窗口半透明，但內容不透明；帶陰影；java

4，窗口可拖動；jquery

5，拖動中止以後，滾動頁面時窗口位置不動；ide

6，可使用jQuery；ui

7，有關閉按鈕；spa

進一步功能具體描述：3d

點按鈕，會有一個能夠拖拽的浮層出來。指針

有一個背景遮罩，支持標題欄的拖拽，在標題欄之外，在標題欄區域以外的區域拖拽是沒有效果的，拖拽功能限定，他的拖拽功能被限定在但是可視區域內。

拖曳的思路：

獲取鼠標的位置，鼠標移動的時候，獲取鼠標的位置，獲取x軸y軸，賦給窗口的x軸y軸，窗口弄成絕對定位。鼠標鬆開的時候把這個事件取消掉。

拖拽的實現原理：

鼠標移動的時候，拿鼠標移動時的座標位置不斷更新浮層的position。

1.鼠標在浮層元素按下的時候，把這個浮層元素標記爲能夠拖動。

2.鼠標移動的時候，咱們先檢測一下浮層元素標記的波動是否是能夠拖動。若是是的話，讓浮層跟着鼠標一塊兒移動，不是的話就忽略。

3.鼠標鬆開的時候標記浮層元素不能夠拖動

4.js拖拽主要用到了鼠標三個事件：mousedown、mousemove、mouseup。

mousedown：鼠標按下

mouseup：鼠標鬆開

mousemove：鼠標移動

備註：mousedown和click的區別：鼠標點擊的整個過程會發生 mousedown→mouseup→click三個事件， click在最後鼠標鬆開以後纔會發生。

說到這裏，咱們就不得不講一下鼠標事件。

下面簡單的講一下鼠標事件：

(1)click事件

(2)dbclick事件

(3)mousedown事件

(4)mouseup事件

(5)mouseenter事件

(6)mouseover事件

(7)mouseleaver事件

(8)mouseout事件

解釋：（鼠標事件的解釋說明選自w3school）

（1）click事件：click事件於用戶在元素敲擊鼠標左鍵，並在相同元素上鬆開左鍵時觸發。

(2) dbclick事件：當雙擊元素時，會發生 dblclick 事件。當鼠標指針停留在元素上方，而後按下並鬆開鼠標左鍵時，就會發生一次 click。在很短的時間內發生兩次 click，便是一次 double click 事件。

實例：

當雙擊按鈕時，隱藏或顯示元素：

1 $(document).ready(function(){
2     $("button").dblclick(function(){
3         $("p").slideToggle();
4     });
5 });

(3)mousedown事件：當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生mousedown 事件。與 click 事件不一樣，mousedown 事件僅須要按鍵被按下，而不須要鬆開便可發生。

1 $(document).ready(function(){
2     $("button").mousedown(function(){
3         $("p").slideToggle();
4     });
5 });

(4)mouseup事件：當在元素上放鬆鼠標按鈕時，會發生 mouseup 事件。

與 click 事件不一樣，mouseup 事件僅須要放鬆按鈕。當鼠標指針位於元素上方時，放鬆鼠標按鈕就會觸發該事件。

1 $(document).ready(function(){
2     $("button").mouseup(function(){
3         $("p").slideToggle();
4     });
5 });

(5)mouseenter事件：當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與 mouseleave 事件一塊兒使用。

註釋：與 mouseover 事件不一樣，只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。若是鼠標指針穿過任何子元素，一樣會觸發 mouseover 事件。

(6)mouseover事件：當鼠標指針位於元素上方時，會發生 mouseover 事件。該事件大多數時候會與 mouseout 事件一塊兒使用。

註釋：與 mouseenter 事件不一樣，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。

1 $(document).ready(function(){
2     $("p").mouseover(function(){
3         $("p").css("background-color","yellow");
4     });
5     $("p").mouseout(function(){
6         $("p").css("background-color","#E9E9E4");
7     });
8 });

mouseenter 與 mouseover 的不一樣

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5     x=0;
 6     y=0;
 7     $(document).ready(function(){
 8           $("div.over").mouseover(function(){
 9                 $(".over span").text(x+=1);
10           });
11           $("div.enter").mouseenter(function(){
12                 $(".enter span").text(y+=1);
13           });
14     });
15 </script>
16 </head>
17 <body>
18     <p>不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。</p>
19     <p>只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。</p>
20     <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
21     　　<h2 style="background-color:white;">被觸發的 Mouseover 事件：<span></span></h2>
22 　　</div>
23     <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
24     　　<h2 style="background-color:white;">被觸發的 Mouseenter 事件：<span></span></h2>
25     </div>
26 </body>
27 </html>

(7)mouseleaver事件：當鼠標指針穿過元素時，會發生 mouseenter 事件。

該事件大多數時候會與 mouseleave 事件一塊兒使用。

註釋：與 mouseout 事件不一樣，只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。若是鼠標指針離開任何子元素，一樣會觸發 mouseout 事件。

(8)mouseout事件

當鼠標指針從元素上移開時，發生 mouseout 事件。

該事件大多數時候會與 mouseover 事件一塊兒使用。

註釋：與 mouseleave 事件不一樣，不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。

請看下面例子的演示。

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 　　x=0;
 6 　　y=0;
 7 　　$(document).ready(function(){
 8   　　　　$("div.out").mouseout(function(){
 9     　　　　　　$(".out span").text(x+=1);
10   　　　　});
11   　　　　$("div.leave").mouseleave(function(){
12     　　　　　　$(".leave span").text(y+=1);
13   　　　　});
14 　　});
15 </script>
16 </head>
17 <body>
18 　　<p>不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。</p>
19 　　<p>只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。</p>
20 　　<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
21 　　　　<h2 style="background-color:white;">被觸發的 Mouseout 事件：<span></span></h2>
22 　　</div>
23 　　<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
24 　　　　<h2 style="background-color:white;">被觸發的 Mouseleave 事件：<span></span></h2>
25 　　</div>
26 </body>
27 </html>

注意：本文爲原創，轉載請以連接形式標明本文地址，謝謝合做。

本文地址：http://www.cnblogs.com/wanghuih/p/5569438.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。