简单浮层制作

Jeff 发布于2019-08-30 15:53 / 2858人阅读

摘要：小知识透明的在中的像素小一些，背景色变一下，这样边框自然出来了点击按钮主要是切换浮层的转态阻止事件冒泡定时器，的含义会在下一轮事件循环一开始就执行。

浮层效果预览

实现了：
. 点击按钮弹出浮层
. 点击别处关闭浮层
. 点击浮层时，浮层不得关闭
. 再次点击按钮，浮层消失

要点解析：
页面结构


        
        
            我是浮层

三角形的实现
注意这里的三角形，其实是用两个 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云服务器云服务器简单视频制作网页制作简单简单网站制作简单的表格制作视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116763.html

简单浮层制作

摘要：小知识透明的在中的像素小一些，背景色变一下，这样边框自然出来了点击按钮主要是切换浮层的转态阻止事件冒泡定时器，的含义会在下一轮事件循环一开始就执行。浮层效果预览 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 实现了：. 点击按钮弹出浮层. 点击别处关闭浮层. 点击浮层时，浮层不得关闭. 再次点击按钮，浮层消失要...

Taste 2019-08-22 18:13 评论0 收藏0
简单浮层制作

摘要：小知识透明的在中的像素小一些，背景色变一下，这样边框自然出来了点击按钮主要是切换浮层的转态阻止事件冒泡定时器，的含义会在下一轮事件循环一开始就执行。浮层效果预览 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 实现了：. 点击按钮弹出浮层. 点击别处关闭浮层. 点击浮层时，浮层不得关闭. 再次点击按钮，浮层消失要...

Eidesen 2019-08-02 10:46 评论0 收藏0
前端的3D(css3版本)--淘宝造物节3D创景的制作

摘要：同时需要注意横竖屏会把陀螺仪的改变开始倾斜时，记录开始的陀螺仪位置，主体层的位置。检测陀螺仪转动时间与插件的兼容角度倾斜进行缓冲动画以上便是主要代码，最好自己运行调试下，运用好动画函数，理解每一个步骤。前端实现还有更牛的。前端的3D(css3版本)，其实是依托Css3的功劳，先上一个例子 http://antario.act.qq.com/代码地址：链接:https://pan.b...

MarvinZhang 2019-08-20 17:20 评论0 收藏0