簡單浮層制作

Taste 發布于2019-08-22 18:13 / 713人閱讀

摘要：小知識透明的在中的像素小一些，背景色變一下，這樣邊框自然出來了點擊按鈕主要是切換浮層的轉態阻止事件冒泡定時器，的含義會在下一輪事件循環一開始就執行。

浮層效果預覽

實現了：
. 點擊按鈕彈出浮層
. 點擊別處關閉浮層
. 點擊浮層時，浮層不得關閉
. 再次點擊按鈕，浮層消失

要點解析：
頁面結構


        
        
            我是浮層

三角形的實現
注意這里的三角形，其實是用兩個 div 來實現。

.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() 主要是切換浮層的轉態
e.stopPropagation() 阻止事件冒泡

setTimeout() 定時器，
setTimetout(f,0) 的含義會在下一輪事件循環一開始就執行。
setTimeout(f, 0) 這種寫法的目的是，盡可能早地執行 f，但是并不能保證立刻就執行 f。

補充知識點：
toggle()
stopPropagation()
setTimeout()

云服務器 GPU云服務器簡單視頻制作網頁制作簡單簡單網站制作簡單的表格制作視頻

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95632.html

簡單浮層制作

摘要：小知識透明的在中的像素小一些，背景色變一下，這樣邊框自然出來了點擊按鈕主要是切換浮層的轉態阻止事件冒泡定時器，的含義會在下一輪事件循環一開始就執行。浮層效果預覽 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 實現了：. 點擊按鈕彈出浮層. 點擊別處關閉浮層. 點擊浮層時，浮層不得關閉. 再次點擊按鈕，浮層消失要...

Eidesen 2019-08-02 10:46 評論0 收藏0
簡單浮層制作

摘要：小知識透明的在中的像素小一些，背景色變一下，這樣邊框自然出來了點擊按鈕主要是切換浮層的轉態阻止事件冒泡定時器，的含義會在下一輪事件循環一開始就執行。浮層效果預覽 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 實現了：. 點擊按鈕彈出浮層. 點擊別處關閉浮層. 點擊浮層時，浮層不得關閉. 再次點擊按鈕，浮層消失要...

Jeff 2019-08-30 15:53 評論0 收藏0
前端的3D(css3版本)--淘寶造物節3D創景的制作

摘要：同時需要注意橫豎屏會把陀螺儀的改變開始傾斜時，記錄開始的陀螺儀位置，主體層的位置。檢測陀螺儀轉動時間與插件的兼容角度傾斜進行緩沖動畫以上便是主要代碼，最好自己運行調試下，運用好動畫函數，理解每一個步驟。前端實現還有更牛的。前端的3D(css3版本)，其實是依托Css3的功勞，先上一個例子 http://antario.act.qq.com/代碼地址：鏈接:https://pan.b...

MarvinZhang 2019-08-20 17:20 評論0 收藏0