简单浮层制作

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

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

浮层效果预览

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

要点解析：
页面结构


        
        
            我是浮层

三角形的实现
注意这里的三角形，其实是用两个 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()

超融合服务器专线服务简单视频制作网页制作简单简单网站制作简单的表格制作视频

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

转载请注明本文地址：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
前端的3D(css3版本)--淘宝造物节3D创景的制作

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

godiscoder 2019-08-05 17:54 评论0 收藏0
理解Event冒泡模型

摘要：具体的模型可以看冒泡模型上面的官方文档中，我只研究一下捕获阶段和冒泡阶段。修复第二个我们既然知道了第二个产生的原因，那么我们阻止冒泡顺序解决的方案，不让其往上冒泡，自己管理。本文探索一下Event的冒泡过程和初学遇到的几个小bug DOM Event概述 Event接口是检测在DOM中的发生的所有事件，我们一直在用，而且从DOM的很早的版本就一直在用着。早期的网景(后来的火狐)和IE...

JasinYip 2019-08-05 12:48 评论0 收藏0