資訊專欄INFORMATION COLUMN
摘要：小知識透明的在中的像素小一些，背景色變一下，這樣邊框自然出來了點擊按鈕主要是切換浮層的轉(zhuǎn)態(tài)阻止事件冒泡定時器，的含義會在下一輪事件循環(huán)一開始就執(zhí)行。
浮層效果預(yù)覽
實現(xiàn)了：
. 點擊按鈕彈出浮層
. 點擊別處關(guān)閉浮層
. 點擊浮層時，浮層不得關(guān)閉
. 再次點擊按鈕，浮層消失
要點解析：
頁面結(jié)構(gòu)
我是浮層
三角形的實現(xiàn)
注意這里的三角形，其實是用兩個 div 來實現(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;
}
小知識：
transparent adj. 透明的
在 ::after 中 border 的像素小一些，背景色變一下，這樣邊框自然出來了
點擊按鈕：
$(".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() 定時器，
setTimetout(f,0) 的含義會在下一輪事件循環(huán)一開始就執(zhí)行。
setTimeout(f, 0) 這種寫法的目的是，盡可能早地執(zhí)行 f，但是并不能保證立刻就執(zhí)行 f。
補(bǔ)充知識點：
toggle()
stopPropagation()
setTimeout()
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116763.html
摘要：同時需要注意橫豎屏?xí)淹勇輧x的改變開始傾斜時，記錄開始的陀螺儀位置，主體層的位置。檢測陀螺儀轉(zhuǎn)動時間與插件的兼容角度傾斜進(jìn)行緩沖動畫以上便是主要代碼，最好自己運行調(diào)試下，運用好動畫函數(shù)，理解每一個步驟。前端實現(xiàn)還有更牛的。 前端的3D(css3版本)，其實是依托Css3的功勞，先上一個例子 http://antario.act.qq.com/代碼地址：鏈接:https://pan.b...
閱讀 649·2023-04-26 02:08
閱讀 2669·2021-11-18 10:02
閱讀 3472·2021-11-11 16:55
閱讀 2354·2021-08-17 10:13
閱讀 2915·2019-08-30 15:53
閱讀 696·2019-08-30 15:44
閱讀 2561·2019-08-30 11:10
閱讀 1768·2019-08-29 16:57
