資訊專欄INFORMATION COLUMN
摘要：小知識(shí)透明的在中的像素小一些，背景色變一下，這樣邊框自然出來了點(diǎn)擊按鈕主要是切換浮層的轉(zhuǎn)態(tài)阻止事件冒泡定時(shí)器，的含義會(huì)在下一輪事件循環(huán)一開始就執(zhí)行。
浮層效果預(yù)覽
實(shí)現(xiàn)了：
. 點(diǎn)擊按鈕彈出浮層
. 點(diǎn)擊別處關(guān)閉浮層
. 點(diǎn)擊浮層時(shí)，浮層不得關(guān)閉
. 再次點(diǎn)擊按鈕，浮層消失
要點(diǎn)解析：
頁面結(jié)構(gòu)
我是浮層
三角形的實(shí)現(xiàn)
注意這里的三角形，其實(shí)是用兩個(gè) div 來實(shí)現(xiàn)。
.tips::before{
content:"";
right:100%;
top:3px;
border:10px solid transparent;
border-right-color:red;
position:absolute;
}
.tips::after{
content:"";
right:100%;
top:4px;
border:9px solid transparent;
border-right-color:white;
position:absolute;
}
小知識(shí)：
transparent adj. 透明的
在 ::after 中 border 的像素小一些，背景色變一下，這樣邊框自然出來了
點(diǎn)擊按鈕：
$(".clickMe").on("click",(e)=>{$(".tips").toggle();
setTimeout(()=>{
$(document).one("click",()=>{$(".tips").hide()})
},0)
})
$(".wrapper").on("click",(e)=>{e.stopPropagation()})
toggle() 主要是切換浮層的轉(zhuǎn)態(tài)
e.stopPropagation() 阻止事件冒泡
setTimeout() 定時(shí)器，
setTimetout(f,0) 的含義會(huì)在下一輪事件循環(huán)一開始就執(zhí)行。
setTimeout(f, 0) 這種寫法的目的是，盡可能早地執(zhí)行 f，但是并不能保證立刻就執(zhí)行 f。
補(bǔ)充知識(shí)點(diǎn)：
toggle()
stopPropagation()
setTimeout()
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52541.html
摘要：小知識(shí)透明的在中的像素小一些，背景色變一下，這樣邊框自然出來了點(diǎn)擊按鈕主要是切換浮層的轉(zhuǎn)態(tài)阻止事件冒泡定時(shí)器，的含義會(huì)在下一輪事件循環(huán)一開始就執(zhí)行。 浮層效果預(yù)覽 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 實(shí)現(xiàn)了：. 點(diǎn)擊按鈕彈出浮層. 點(diǎn)擊別處關(guān)閉浮層. 點(diǎn)擊浮層時(shí)，浮層不得關(guān)閉. 再次點(diǎn)擊按鈕，浮層消失 要...
摘要：小知識(shí)透明的在中的像素小一些，背景色變一下，這樣邊框自然出來了點(diǎn)擊按鈕主要是切換浮層的轉(zhuǎn)態(tài)阻止事件冒泡定時(shí)器，的含義會(huì)在下一輪事件循環(huán)一開始就執(zhí)行。 浮層效果預(yù)覽 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 實(shí)現(xiàn)了：. 點(diǎn)擊按鈕彈出浮層. 點(diǎn)擊別處關(guān)閉浮層. 點(diǎn)擊浮層時(shí)，浮層不得關(guān)閉. 再次點(diǎn)擊按鈕，浮層消失 要...
摘要：同時(shí)需要注意橫豎屏?xí)淹勇輧x的改變開始傾斜時(shí)，記錄開始的陀螺儀位置，主體層的位置。檢測(cè)陀螺儀轉(zhuǎn)動(dòng)時(shí)間與插件的兼容角度傾斜進(jìn)行緩沖動(dòng)畫以上便是主要代碼，最好自己運(yùn)行調(diào)試下，運(yùn)用好動(dòng)畫函數(shù)，理解每一個(gè)步驟。前端實(shí)現(xiàn)還有更牛的。 前端的3D(css3版本)，其實(shí)是依托Css3的功勞，先上一個(gè)例子 http://antario.act.qq.com/代碼地址：鏈接:https://pan.b...
閱讀 982·2021-11-23 09:51
閱讀 2694·2021-08-23 09:44
閱讀 655·2019-08-30 15:54
閱讀 1432·2019-08-30 13:53
閱讀 3100·2019-08-29 16:54
閱讀 2526·2019-08-29 16:26
閱讀 1186·2019-08-29 13:04
閱讀 2313·2019-08-26 13:50
