亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用原生js實(shí)現(xiàn)頁面蒙灰(mask)效果示例代碼

 更新時(shí)間：2014年06月20日 11:37:40   投稿：whsnow  
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當(dāng)然jquery也提供了這種蒙灰方法，下面有個(gè)示例，大家可以參考下

對(duì)于web應(yīng)用開發(fā)者，當(dāng)用戶進(jìn)行界面瀏覽時(shí)如果后臺(tái)程序處理程序時(shí)間較長，那么用戶在網(wǎng)頁的等待時(shí)間會(huì)較長，但是如果頁面上沒有一個(gè)比較友好的提示方式

（增加蒙灰效果），那么用戶體驗(yàn)會(huì)不是特別良好，用戶不知道現(xiàn)在是不是應(yīng)該點(diǎn)擊別的程序，用戶并不知道是不是應(yīng)該繼續(xù)等待網(wǎng)頁，還是可以點(diǎn)擊別的頁面。

現(xiàn)在就有一個(gè)比較良好的交互，就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當(dāng)然jquery也提供了這種蒙灰方法。在此作者希望自己也能夠

使用原生的js實(shí)現(xiàn)自己的蒙灰效果。故自己做了嘗試。實(shí)現(xiàn)了蒙灰效果。在此我只關(guān)注實(shí)現(xiàn)，頁面美觀程度我沒有太多調(diào)整，所以頁面不太美觀。在此貼出實(shí)現(xiàn)代碼。

在CODE上查看代碼片派生到我的代碼片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
.maskStyle { 
background-color:#B8B8B8; 
z-index:1; 
filter:alpha(opacity=50); 
opacity:0.8; 
position:absolute; 
text-align:center; 
color:blue; 
font:bold 1em "宋體",Arial,Times; 
height:25px; 
font-weight:bold; 
overflow:hidden; 

} 
</style> 
</HEAD> 
<script type="text/javascript"> 
function creatMaskLayer(effectItem,showText) { 
divItem = document.createElement("div"); 
divItem.className="maskStyle"; 
divItem.style.lineHeight=effectItem.offsetHeight+"px"; 
divItem.innerText=showText; 
divItem.style.width=effectItem.offsetWidth; 
divItem.style.height=effectItem.offsetHeight; 
divItem.style.top=effectItem.offsetTop; 
divItem.style.left=effectItem.offsetLeft; 
return divItem; 
} 
function setMask() { 
var effectItem = document.getElementById("test"); 
var existMaskItem = findMaskItem(effectItem); 
if(existMaskItem) { 
return; 
} 
var showText = "加載中..."; 
effectItem.appendChild(creatMaskLayer(effectItem,showText)); 
} 
function removeMask() { 
var effectItem = document.getElementById("test"); 
var maskItem = findMaskItem(effectItem); 
if(maskItem) { 
effectItem.removeChild(maskItem); 
} 
} 
function findMaskItem(item) { 
var children = item.children; 
for(var i=0;i<children.length;i++) { 
if("maskStyle"==(children[i].className)) { 
return children[i]; 
} 
} 
} 
</script> 
<BODY> 
<input type="button" value="蒙灰" onclick="setMask()"/> 
<input type="button" value="取消蒙灰" onclick="removeMask()"/> 
<br> 
<div id="test" style="border:1px solid;width:300px;height:300px"> 
蒙灰我吧 
<input type="button" value="測試是否還能點(diǎn)擊" onclick="alert('OK!')"/> 
</div> 
</BODY> 
</HTML>


解釋一下代碼中比較重要的地方。

.maskStyle是蒙灰層的樣式

其中
在CODE上查看代碼片派生到我的代碼片

filter:alpha(opacity=50); 
opacity:0.8;

是代表蒙灰層透明度，filter屬性是為了兼容IE8瀏覽器

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

PS：蒙灰效果需要把要蒙灰到element放到div中才可以

相關(guān)文章

  • 簡單實(shí)現(xiàn)JS對(duì)dom操作封裝

    簡單實(shí)現(xiàn)JS對(duì)dom操作封裝

    這篇文章主要介紹了簡單實(shí)現(xiàn)JS對(duì)dom操作封裝，需要的朋友可以參考下
    2015-12-12
  • 使用有限狀態(tài)機(jī)實(shí)現(xiàn)簡版的html解析器

    使用有限狀態(tài)機(jī)實(shí)現(xiàn)簡版的html解析器

    FSM(Finite State Machines) 有限狀態(tài)機(jī),也叫有限狀態(tài)自動(dòng)機(jī),是為研究有限內(nèi)存的計(jì)算過程和某些語言類而抽象出的一種計(jì)算模型,本文將使用有限狀態(tài)機(jī)實(shí)現(xiàn)一個(gè)簡版的html解析器,有需要的小伙伴可以參考下
    2023-11-11
  • 原生js自定義右鍵菜單

    原生js自定義右鍵菜單

    這篇文章主要為大家詳細(xì)介紹了原生js自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • JavaScript折半查找（二分查找）算法原理與實(shí)現(xiàn)方法示例

    JavaScript折半查找（二分查找）算法原理與實(shí)現(xiàn)方法示例

    這篇文章主要介紹了JavaScript折半查找（二分查找）算法原理與實(shí)現(xiàn)方法,結(jié)合具體問題描述了折半查找算法的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2018-08-08
  • 一篇文中告訴你JS中的"值傳遞"和"引用傳遞"

    一篇文中告訴你JS中的"值傳遞"和"引用傳遞"

    在JavaScript中,可以通過值和引用傳遞,兩者之間的主要區(qū)別是,按值傳遞發(fā)生在賦值基本類型的時(shí)候,而賦值對(duì)象時(shí)按引用傳遞,下面這篇文章主要給大家介紹了關(guān)于JS中"值傳遞"和"引用傳遞"的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果

    js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • 通過BootStrap-select插件 js jQuery控制select屬性變化

    通過BootStrap-select插件 js jQuery控制select屬性變化

    bootstrap-select我想大家都不陌生是一個(gè)前端下拉框的插件非常好用，在select的標(biāo)簽中設(shè)置屬性可以做很多功能控制，下面通過本文給大家詳細(xì)介紹下
    2017-01-01
  • 向大師們學(xué)習(xí)Javascript（視頻與PPT）

    向大師們學(xué)習(xí)Javascript（視頻與PPT）

    在開始之前，先與大家一起認(rèn)識(shí)下這篇文章的主角，世界級(jí)的javascript大牛們：Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas?？疵忠苍S挺陌生，但是如果你對(duì)javascript還算熟悉，一定不會(huì)對(duì)他們的作品陌生。
    2009-12-12
  • 面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解

    面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解

    這篇文章主要為大家介紹了判斷元素是否在可視區(qū)域中IntersectionObserver面試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • JS模擬實(shí)現(xiàn)Select效果代碼

    JS模擬實(shí)現(xiàn)Select效果代碼

    這篇文章主要介紹了JS模擬實(shí)現(xiàn)Select效果代碼,涉及JavaScript基于鼠標(biāo)點(diǎn)擊事件動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)Select效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09

最新評(píng)論