欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript簡單實(shí)現(xiàn)彈出拖拽窗口（二）

 更新時(shí)間：2016年06月17日 11:11:15   作者：我的前端之路  
這篇文章再次為大家詳細(xì)介紹了JavaScript簡單實(shí)現(xiàn)彈出拖拽窗口的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

接上文JavaScript簡單實(shí)現(xiàn)彈出拖拽窗口（一）進(jìn)行學(xué)習(xí)。 
下面開始具體分析代碼部分：
 首先我們先確認(rèn)下結(jié)構(gòu)：
 懸浮窗口：初始不可見。包括標(biāo)題欄和內(nèi)容欄，標(biāo)題欄內(nèi)有標(biāo)題和關(guān)閉按鈕。
 遮罩層：初始不可見。用于設(shè)置彈出懸浮窗口時(shí)的半透明背景，
 按鈕：用于點(diǎn)擊彈出懸浮窗口。 

下面進(jìn)行詳細(xì)解釋
 1、要讓窗口能自由移動(dòng)，那么窗口的定位（position）應(yīng)該采用絕對(duì)定位（absolute）；   

 /*登錄浮層組件*/
.popup{ 
 display:none;            /*初始隱藏*/
 width: 380px;
 height: auto;            /*高度自由，因?yàn)椴淮_定，內(nèi)容多少。*/
 border: 1px solid #D5D5D5;
 background: #fff;           /*窗口內(nèi)容不透明，背景為白色*/ 
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
 -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25);
 -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25);    /*內(nèi)容窗口帶陰影*/
 border-radius: 8px;           /* 所有角都使用半徑為8px的圓角，此屬性為CSS3標(biāo)準(zhǔn)屬性 */ 
 -moz-border-radius: 8px;         /* Mozilla瀏覽器的私有屬性 */ 
 -webkit-border-radius:8px;         /* Webkit瀏覽器的私有屬性 */ /*窗口圓角*/
 position: absolute;
 top: 100px;
 left: 100px;            /*絕對(duì)定位*/
 z-index: 9000; 
 }

2.給窗口添加標(biāo)題欄，同時(shí)將標(biāo)題欄的鼠標(biāo)光標(biāo)設(shè)置為拖動(dòng)（move）形狀（在chrome中拖動(dòng)的時(shí)候，光標(biāo)會(huì)變成文字光標(biāo)，松開鼠標(biāo)鍵后恢復(fù)），這里需要對(duì)標(biāo)題欄的左上角和右上角設(shè)置一下圓角。 

 /*標(biāo)題欄區(qū)域*/
.popup_title{
 height: 48px;
 line-height: 48px;           /*使垂直居中*/
 padding:0px 20px;           /*使距離左邊有一定距離*/    
 background: #f5f5f5;          /*背景顏色*/
 border-bottom: 1px solid #efefef;       /*底邊框*/
 border-radius:8px 8px 0 0;         /* 左上角和右上角使用半徑為5px的圓角，此屬性為CSS3標(biāo)準(zhǔn)屬性 */ 
 -moz-border-radius: 8px 8px 0 0;       /* Mozilla瀏覽器的私有屬性 */ 
 -webkit-border-radius:8px 8px 0 0;       /* Webkit瀏覽器的私有屬性 */ /*窗口圓角*/
 color: #535353;
 font-size: 16px;           /*字體顏色和字體大小*/
 cursor: move;            /*可移動(dòng)樣式*/
 -moz-user-select: none;          /* Firefox all */
 -webkit-user-select: none;         /* Chrome all / Safari all /opera15+*/ 
 -ms-user-select: none;          /*IE10*/
 -khtml-user-select: none;         /*早期瀏覽器*/
 user-select:none;
 -o-user-select: none;          /* 以上兩個(gè)屬性目前并未支持，寫在這里為了減少風(fēng)險(xiǎn) */ 
 }

這里有幾個(gè)知識(shí)點(diǎn)需要理解：
 1. css3(border-radius)邊框圓角
 border-radius 是一種縮寫方法。另外其四個(gè)值是按照top-left、top-right、bottom-right、bottom-left的順序來設(shè)置的其主要會(huì)有下面幾種情形出現(xiàn)：
 1.只有一個(gè)值，那么 top-left、top-right、bottom-right、bottom-left 四個(gè)值相等。
 2.有兩個(gè)值，那么 top-left 等于 bottom-right，并且取第一個(gè)值；top-right 等于 bottom-left，并且取第二個(gè)值
 3.有三個(gè)值，其中第一個(gè)值是設(shè)置top-left;而第二個(gè)值是 top-right 和 bottom-left 并且他們會(huì)相等,第三個(gè)值是設(shè)置 bottom-right。
 4.有四個(gè)值，其中第一個(gè)值是設(shè)置 top-left 而第二個(gè)值是 top-right 第三個(gè)值 bottom-right 第四個(gè)值是設(shè)置 bottom-left。
 支持的瀏覽器： 

2.  cursor: move

cursor 屬性規(guī)定所顯示的指針（光標(biāo)）的類型。
 屬性值為move時(shí)，表示此光標(biāo)所指的對(duì)象是可以移動(dòng)的，通常為一個(gè)交叉箭頭，如圖。

3.user-select：用來控制內(nèi)容的可選擇性
 auto——默認(rèn)值，用戶可以選中元素中的內(nèi)容
 none——用戶不能選擇元素中的任何內(nèi)容
 text——用戶可以選擇元素中的文本
 element——文本可選，但僅限元素的邊界內(nèi)(只有IE和FF支持)
 需要注意的是：user-select并不是一個(gè)W3C的CSS標(biāo)準(zhǔn)屬性，瀏覽器支持的不完整，需要對(duì)每種瀏覽器進(jìn)行調(diào)整
 user-select說明：
 設(shè)置或檢索是否允許用戶選中文本。
 (1)IE6-9不支持該屬性，但支持使用標(biāo)簽屬性 onselectstart="return false;" 來達(dá)到 user-select:none 的效果；Safari和Chrome也支持該標(biāo)簽屬性；
 (2)直到Opera12.5仍然不支持該屬性，但和IE6-9一樣，也支持使用私有的標(biāo)簽屬性 unselectable="on" 來達(dá)到 user-select:none 的效果；
 (3)unselectable 的另一個(gè)值是 off；除Chrome和Safari外，在其它瀏覽器中，如果將文本設(shè)置為 -ms-user-select:none;，則用戶將無法在該文本塊中開始選擇文本。
 不過，如果用戶在頁面的其他區(qū)域開始選擇文本，則用戶仍然可以繼續(xù)選擇將文本設(shè)置為 -ms-user-select:none; 的區(qū)域文本.
 分析以下代碼（注意：此代碼及此代碼的分析結(jié)果來自w3help）：

<!DOCTYPE html>
<html>
<body>
  <div unselectable="on" style="background:#CCC;" >unselectable=on </div>
  <br/>
  <div style="background:#CCC;-webkit-user-select:none;" >-webkit-user-select:none;</div>
  <br/>
  <div style="background:#CCC;-moz-user-select:none;" >-moz-user-select:none;</div>
  <br/>
  <div style="background:#CCC;" onselectstart="return false;" >onselectstart="return false;"</div>
</body>
</html>

在各瀏覽器中效果如下：

注1：可以禁止內(nèi)容選中。
注2：沒有禁止內(nèi)容選中。
 可見，禁止內(nèi)容選中的方法如下：
 IE 給標(biāo)簽設(shè)置 unselectable= "on" ，設(shè)置標(biāo)簽方法 onselectstart="return false;"
 Firefox 給標(biāo)簽設(shè)置私有樣式 -moz-user-select:none 。
 Chrome Safari 給標(biāo)簽設(shè)置私有樣式 -webkit-user-select:none ，設(shè)置標(biāo)簽方法 onselectstart="return false;"。
 Opera 給標(biāo)簽設(shè)置 unselectable= "on" 

 解決方案
 給標(biāo)簽設(shè)置樣式 -moz-user-select:none ;-webkit-user-select:none 同時(shí)標(biāo)簽設(shè)置 unselectable= "on" ，保證各瀏覽器都可以禁止內(nèi)容選中。
 如案例中給懸浮差彈出窗的標(biāo)題欄設(shè)置禁止選中樣式，可以這樣設(shè)置：

<div class="popup_title" id="popup_title" unselectable= "on" >
 登錄
  <a href="javascript:hidepopup();" class="popup_closebutton"></a>
</div>
.popup_title{
 -moz-user-select: none;          /* Firefox all */
 -webkit-user-select: none;         /* Chrome all / Safari all /opera15+*/ 
 -ms-user-select: none;          /*IE10*/
 -khtml-user-select: none;         /*早期瀏覽器*/
 user-select:none;
 -o-user-select: none;          /* 以上兩個(gè)屬性目前并未支持，寫在這里為了減少風(fēng)險(xiǎn) */ 
}

 注意：本文為原創(chuàng)， 地址：http://www.cnblogs.com/wanghuih/p/5576910.html

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論