遮罩層前端_前端開發中常用到的js特效有哪些

⑴ 前端製作遮罩與蒙版

概念上兩者非常容易混淆，但完成的效果是一樣的，需記住哪個是無色摳取，哪個是黑色摳除。
再者還有個裁剪，只是做裁切，沒有對半透明情況的處理。
這樣一說就知道，本文閱讀起來可能是會有點亂的。

那麼前端方法中 如何實現 ，又各 有哪些應用場景 呢？

比較容易搜到的，也是用得最多的，強得一批。
現在是只有遮罩功能的， mask 指定的是下層形狀，本元素及其所有子級為上層圖案。
<small>以後的發展可能會通過 mask-composite 實現蒙版，小期待一下吧。</small>

遮罩嘛，即有色就顯示，無色則隱藏。
rgba(0,0,0,0)、tranpsarent，png 圖片中的透明或無色就摳除。

mask 和 background 的設置非常類似，也可以縮寫：
mask-image / mask-repeat / mask-position / mask-size / mask-origin / mask-clip
mask-image 也和 background-image 一樣支持 url， gradient，image-set，element 等等。

舉幾個栗子：

至於剩下的 mask-mode / mask-type / mask-composite 瀏覽器支持還不太妙，暫可以不考慮。
但功能上卻是強大，需要更多了解還請自行翻閱文檔。

PS：兼容性方面雖然一片紅，IE 什麼的拋棄掉，實驗下來其實還不錯。寫上 -webkit-mask 基本都能用。
PPS：firefox 中動畫時 mask-size 小於 100% 會不顯示，但定值可以，原因不知。

個人有點莫名的習慣，不管做什麼效果，都會往 SVG 上想一想，可能源於它強大的功能吧。
相比 html+css 多了很多特性，如路徑/線條的設置/諸多濾鏡/視圖限定等；
相比 canvas 多了一些 dom 上的便捷操作，如事件。

SVG 可以用 mask 來實現蒙版，用 clipPath 來實現裁剪（下文會講）。

區分一下，svg mask 為蒙版，白色為顯示；css mask 為遮罩，有色為顯示。

mask 蒙版內可以包裹透明圖片或文字。

但使用蒙版的元素，卻莫名不能是 image，這就很完蛋呀，有待研究。

如果 css 的 mask 適用於圖片和漸變等的話，那 background-clip:text 就適用於文字。
字面意思，將背景裁切成文字范圍。

另外，background-clip 還可以設 content-box，也是不錯的功能，
默認 padding-box，border-box 有上邊框不被修改的 BUG。

註：兼容性上，明文規定要加 -webkit-。順便拋棄 IE。

很多文章誤以為是 text-fill-color 實現了遮罩功能，其實是 background-clip:text 呀！

clip 在 canvas 中本來的作用是切一塊畫布獨立出來。
拿來做遮罩效果也是可以的，但並非真的遮罩，只是裁剪，因為它不是按有色無色來判斷顯示的。

還可以用 beginPath, lineTo 等線條操作來形成圖形。

註：fillRect 和 strokeRect 是無法被切出來的，要用 rect。
註：為了避免影響其他地方，用 save 和 restore 包起來就行了。
註：文字遮罩用 clip 是無法實現的。

修改 canvas 的渲染規則。比如後寫的蓋住前面的，改成後寫的放到低層之類的。

這些規則中有一個 source-in，就能實現遮罩（按黑白色來判斷顯隱）。

如果你用的 strokeRect 和 fillText 那繪制出來的也是相應效果喲。
如果前者是半透明的，覆蓋的後者渲染出來也會是半透明的。
如果前者是半透明的 PNG 圖片，覆蓋的後者出來的也會是半透明，強無敵。

註：globalCompositeOperation 的默認值是 source-over，用完了別忘了改回來，不然會影響後續操作。

全部規則效果一覽： https://foreverz133.github.io/demos/single/globalCompositeOperation.html
其中有一些可以拿出來提一下，挺好玩的。
source-in：交叉的部分渲染後者
destination-in：交叉的部分渲染前者
destination-out：去掉交叉的部分
destination-over：後者放至下層

主要還是以裁剪為主，裁剪當然是不會根據形狀的顏色什麼的來判斷顯隱的咯。

css 的 clip-path 是老版屬性 clip 的改良版，clip 必須絕對定位，且只有矩形還只能 px。
clip-path 則支持方形/圓形/橢圓形/多邊形，單位也更豐富。

我覺得 clip-path 和 border-radius 一樣，改個圖片或者盒子的樣式又方便又爽。
但也不一樣，因為是裁剪，像 border 呀子級內容呀什麼的也是會被剪掉的，hover 也還是原來的尺寸。

比如蓋一層鏤空的五角星顯示背景色呀，蓋一層鏤空的字呀什麼的
假 DEMO： https://foreverz133.github.io/demos/single/star.html

這應該就是名副其實的遮擋層了吧，與本文其實毫無關系。
但可能你會在你不了解 mask 或需要兼容時用到。
例子： http://www.zhangxinxu.com/wordpress/2016/03/better-black-mask-guide-overlay-method/

除此之外，radial-gradient 可以完成部分類似功能，比如圓形的鏤空，位置和大小設置相較也更方便。

shape-outside 僅能算作是高級版 float 擴展，也與本文毫無關系。
只是因為既然寫了 clip-path 那 shape-outside 就提一下，避免有理解錯誤。

註：shape-outside 得是浮動元素時才有效。
註：它能設的值和 clip-path 基本一致

它並不會改變本身什麼東西，形狀不會變，border 等也還是原來的樣子，還得結合 clip-path 來用。
它只是讓其他與其貼邊的元素有了一個不一樣的貼邊效果。

PS：兼容性吧，怎麼說呢，回退到方形影響應該不大。

雖然 clip-path 又不像 border-radius 可以加邊框陰影什麼的，但其實 polygon 多邊形可以有高級玩法，
比如： https://codepen.io/airen/pen/VPKQxb

文檔顯示以後會支持 url 和 element 等，那就很方便了呀。順便再期待一下 shape-inside 的出現。

你思考一下 css 的 mask / background-clip / clip-path 和 shape-outside 的使用場景，這其實很有意思。

遮罩是有色的部分顯示圖案，蒙版是白色的部分顯示圖案，裁剪只是裁成這個形狀，三者的實際妙用在本文中並沒有深入書寫，僅算是梳理其功能和明確其區別。
還請大佬們多多分享此方面的巧妙案例咯，讓小弟也開開眼。

⑵ 使用Ant Design Vue 做一個常用的修改對話框

使用Ant Design Vue 做一個常用的修改對話框
Ant Design Vue 官網： https://www.antdv.com/docs/vue/introce-cn/

首先我們需要有一個圖1的前端界面，其次我們點擊圖1「修改」按鈕的時候，彈出有遮罩層的一個對話框並在對話框中回顯我們圖一的「轉賬金額」和「到賬時間」的數據；當我們點擊對話框的「修改按鈕時，則向後台伺服器發起一個修改請求，在填寫金額的同時使用正則進行校驗

由上圖可知，第一行和第二行格式一樣，都是一個標題一個內容，所以我們採用一個自定義組件來達到一個通用性的效果

⑶ element-ui中的dialog如何去掉遮罩層

element ui是基於vue的一套前端可視化組件庫，其dialog下的modal屬性是一個布爾值，需要使用v-bind指令進行監聽，試試在前面加個「：」試試
:modal='false' 這樣寫

⑷ 前端遮罩層作用

遮罩層的作用就是將層後面的內容都遮住，覆蓋全屏。

⑸ 前端開發中常用到的js特效有哪些

HTML5 DOM 選擇器
// querySelector() 返回匹配到的第一個元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一個nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);1234567

阻止默認行為
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法阻止默認行為
event.preventDefault();
} else{ // ie 阻止默認行為
event.returnValue = false;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();
});1234567891011121314151617

阻止冒泡
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();
});1234567891011121314151617

滑鼠滾輪事件
$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));

if (delta > 0) {
// 向上滾動
console.log('mousewheel top');
} else if (delta < 0) { // 向下滾動
console.log('mousewheel bottom');
}
});123456789101112

檢測瀏覽器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}

// 測試console.log(isSupportSVG());1234567

檢測瀏覽器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){ return true;
}else{ return false;
}
}// 測試，打開谷歌瀏覽器控制台查看結果console.log(isSupportCanvas());12345678910

檢測是否是微信瀏覽器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}// 測試alert(isWeiXinClient());1234567891011

jQuery 獲取滑鼠在圖片上的坐標
$('#myImage').click(function(event){
//獲取滑鼠在圖片上的坐標
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);

//獲取元素相對於頁面的坐標
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});1234567

驗證碼倒計時代碼
<input id="send" type="button" value="發送驗證碼">12
// 原生js版本var times = 60, // 臨時設為60秒
timer = null;

document.getElementById('send').onclick = function () {
// 計時開始
timer = setInterval(function () {
times--; if (times <= 0) {
send.value = '發送驗證碼';
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + '秒後重試';
send.disabled = true;
}
}, 1000);
}
// jQuery版本var times = 60,
timer = null;

$('#send').on('click', function () {
var $this = $(this); // 計時開始
timer = setInterval(function () {
times--; if (times <= 0) {
$this.val('發送驗證碼');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
} else {
$this.val(times + '秒後重試');
$this.attr('disabled', true);
}
}, 1000);
});2122

常用的一些正則表達式
//匹配字母、數字、中文字元
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//驗證郵箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//驗證手機號
/^1[3|5|8|7]\d{9}$/

//驗證URL
/^http:\/\/.+\./

//驗證身份證號碼
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字元的正則表達式
/[\u4e00-\u9fa5]/

//匹配雙位元組字元(包括漢字在內)
/[^\x00-\xff]/

js時間戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);

console.log(nowDate.getTime()); // 獲得當前毫秒數: 1465816710020console.log(formatDate(nowDate));123456789101112131415

js限定字元數（注意：一個漢字算2個字元）
<input id="txt" type="text">//字元串截取function getByteVal(val, max) {
var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
returnValue += val[i];
} return returnValue;
}

$('#txt').on('keyup', function () {
var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819

js判斷是否移動端及瀏覽器內核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE內核
presto: u.indexOf('Presto') > -1, //opera內核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
gecko: u.indexOf('Firefox') > -1, //火狐內核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}
}

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移動端');
}21

之前我用過一個檢測客戶端的庫覺得挺好用的，也推薦給大家叫 device.js，大家可以 Googel 或網路
GItHub倉庫地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 獲取元素位置
//它返回一個對象，其中包含了left、right、top、bottom四個屬性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;

// 相當於jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456

HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}

fullscreen(document.documentElement);12345678910111213

⑹ 前端開發實現可滑動遮罩層，位置在底部占據總屏幕1/3，寬度充滿屏幕。

⑺ 前端移動端開發，滑動時怎麼禁止陰影層下的屏幕滾動

前端移動端開發，在頁面中打開了一個層,同時打開一個遮罩層，滾動這個層時下面的頁面也會跟著滾動，禁止下面那個頁面的滾動, 只滾動當前的層。

打開彈層時body的touchmove事件addEventListener增加阻止默認行為的事件，關閉彈層時removeEventListener；
阻止touchstart事件的默認行為，在vue下@touchstart.prevent，在彈出層和底層元素之間曾加一層遮罩；

⑻ bootstrap使用模態框當彈出兩層的時候，遮罩層會把原有的透明度減少。

每個模態窗會生成一個class為"modal-backdrop"的遮罩。在模態窗第一次顯示時為這個模態窗的遮罩層設置一個id。例如：
$modal.modal({show: true,backdrop: 'static'});
$('.modal-backdrop').each(function() {
$(this).attr('id', 'id_' + Math.random());

});

⑼ .net core savechanges 網路不好情況下，如何防止用戶連擊重復提交數據

1、前端提交處理顯示遮罩層，如果後台無返回則顯示提交中，直到後台返回成功才進行遮罩層的取消

2、後台可以進行唯一標識符的判定比如名稱是否一樣等等來進行重復提交數據的更新或者丟企

⑽ 前端頁面載入後，整個頁面都是白色，而且按鈕位置處還可以點擊，按f12進入開發模式後，頁面就正常了

看看控制台有沒有報錯，檢查一下是不是設置了遮罩層

遮罩層前端

與遮罩層前端相關的內容