jQuery是一種JS庫,提供了各種實用的方法幫助我們更加方便地操作DOM、事件、動畫等等。其中一個非常有用的方法就是顯示遮罩層,下面我們來介紹一下。
首先,我們需要先在頁面中添加一個遮罩層的HTML結構,比如下面這樣:
<div id="mask"></div>
然后,我們就可以在JS中用jQuery來控制這個遮罩層的顯示和隱藏。下面是一個示例代碼:
$('body').on('click', '#showMaskBtn', function() { $('#mask').show(); }); $('body').on('click', '#hideMaskBtn', function() { $('#mask').hide(); });
上述代碼中,我們通過給頁面上的兩個按鈕綁定點擊事件來控制遮罩層的顯示和隱藏。具體來說,當我們點擊“顯示遮罩”按鈕時,jQuery會使用show()方法來顯示#mask元素;而當我們點擊“隱藏遮罩”按鈕時,jQuery會使用hide()方法來隱藏#mask元素。
需要注意的是,我們還可以使用CSS來對遮罩層進行樣式修改,比如設置其透明度、背景色、z-index等等。這樣,我們就可以根據實際需求自定義出適合自己的遮罩層效果了。
上一篇小程序 顏色漸變css