标签 html 下的文章

解决js控制opactiy蒙版显示隐藏动画失效

场景: 我现在要做一个蒙版 ,而这个蒙版的的要求如下

  1. 点击按钮显示蒙版, 蒙版要求从中心点向四边扩展渐显.
  2. 点击蒙版,蒙版隐藏, 而且必须有动画效果 ;

我应对以上场景 ,第一个想到的是 , 使用opacity + 控制蒙版 width + height 实现 , 附上代码

html

<div class="content">我是内容</div>
<button class="btn">点击我显示蒙版</button>
<div class="mask"></div>

css

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin: 50px auto;
        }

        .btn {
            display: block;
            margin: 50px auto;
            outline: none;
            border: none;
            background: dodgerblue;
            padding: 10px;
            border-radius: 3px;
            color: #fff;
        }

        .mask {
            /*让蒙版居中 , 并且是隐藏状态 */
            width: 0;
            height: 0;
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: all 0.5s;
        }
    </style>

重头戏就在js上面了 .

js

<script>
    let btn = document.querySelector(".btn");
    let mask = document.querySelector(".mask");
    btn.onclick = function () {
        mask.style.width = "100%";
        mask.style.height = "100%";
        mask.style.opacity = "1";
    };
    mask.onclick = function () {
        this.style.opacity = "0";
        this.style.width = "0";
        this.style.height = "0";
    }
</script>

相信很多人看到这份 js 代码, 就会认为这样子没错 ,  对, 是没错 ,但是这样子写的话 , 你会发现 ,你的显示和隐藏效果就会有一个问题 , 你点击蒙版关闭的时候 , 这个动画效果 ,你能看到渐隐, 但是你也能看到改变宽高, 所以这个不符合第二点的要求 , 而这个要怎么解决呢 ?

而我的解决方法是如下的 ,  首先改变一下 css 的一个值

//把css中的这个过度动画的 all (opacity,width,height)  换成 opacity ,也就是只对 opacity生效 .

.mask{
    transition: opacity 0.5s;
}

而这样子再测试一下 , 你会发现原本的哪个问题好了 ,但是又出现了新的问题 ,而新的问题就是 你点击 mask 蒙版的时候 , 蒙版是直接消失的, 而不是渐隐消失的 .

而这个原因其实也很简单 , 因为我设置了 mask 的点击事件为 opacity ,width, height  = 0 ,而我一点击的时候,  opacity的过渡效果还没有执行完, 而 width ,height 就已经变成了 0 了.这样子 就呈现出了一种没有渐隐效果 ,而是直接消失不见的感觉 ,解决方法如下

mask.onclick = function () {
        this.style.opacity = "0";
        setTimeout(function(){
            mask.style.width = "0";
            mask.style.height = "0";
        },500);
    }

改变一下 mask 的点击事件 ,让 opacity 先执行 , 最后再用延时定时器控制他的 width 和 height = 0 . 定时器的时间设置为了上面  opacity 的过渡时间一致即可.


很多人一开始会问 , 我用 display 不行吗, 我直接使用 opacity 不加上 width 和 height 不可以吗 ? 我使用 visibility 不可以吗 ,答案都是可以的 只不过每个人有每个人的方法而已

display 会让元素消失 , 而没有的元素是不能做过渡的 , 所以不适合做过渡

opacity 会让元素隐藏 ,但是仅仅是让元素看不见 ,不代表摸不着, 所以 不加 width 和 height 进行控制, 则会你隐藏之后 ,你再也点不了其他元素

visibility 也是让元素隐藏 ,但是 别忘了 ,他还是会占据空间的


附上完整代码 :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin: 50px auto;
        }

        .btn {
            display: block;
            margin: 50px auto;
            outline: none;
            border: none;
            background: dodgerblue;
            padding: 10px;
            border-radius: 3px;
            color: #fff;
        }

        .mask {
            /*让蒙版居中 , 并且是隐藏状态 */
            width: 0;
            height: 0;
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.5s;
        }
    </style>
</head>
<body>
<div class="content">我是内容</div>
<button class="btn">点击我</button>
<div class="mask"></div>
<script>
    let btn = document.querySelector(".btn");
    let mask = document.querySelector(".mask");
    btn.onclick = function () {
        mask.style.width = "100%";
        mask.style.height = "100%";
        mask.style.opacity = "1";
    };
    mask.onclick = function () {
        this.style.opacity = "0";
        setTimeout(function(){
            mask.style.width = "0";
            mask.style.height = "0";
        },500);
    }
</script>
</body>
</html>

预览地址: 点击预览

完结 , 谢谢 ~

css 改变浏览器文本选中的颜色

   ::selection {
        color: #fff !important;
        background: #3a3f51 !important;
    }

      ::-moz-selection {
        color: #fff !important;
        background: #3a3f51 !important;
    }

      ::-webkit-selection {
        color: #fff !important;
        background: #3a3f51 !important;
    }

 

禁止input弹出手机默认键盘的几种方法

在开发中 总有着种种需求, 例如现在的这个, 我想自定义一个键盘, 而不像用手机默认的键盘,或者什么第三方键盘, 那么,你在使用input的时候 ,就难免需要把手机的默认键盘给禁止掉.

 

第一种方法, 也是目前觉得较好的一种方法

<input type="text"  readonly="readonly" >

通过 readonly 来禁用系统默认的键盘, 而这个属性除了这个功能, 又能干嘛呢?


定义和用法

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。

readonly 属性可与 <input type=”text”> 或 <input type=”password”> 配合使用。


上面这个是官方的解释, 而对我来说 ,可以总结为

readonly 是直接是让 input 不可手动写入, 但是 ,可以复制,选择,也可以去接收焦点,而input框里面 也还是可以传值 .

 

第二种方法 ,

input{
pointer-events: none; }

给input添加这一句css即可, 我也没太弄懂这个属性 ,我弄懂了再回来补, 但是这个方法是可以就用着先

 

第三种方法

使用document.activeElement.blur();

在input获取焦点的时候,在使用blur()的方法就可以将虚拟键盘给隐藏

 

input限制只能输入数字并限制长度和大小

限制长度(字符数)

<input type="number" oninput="if(value.length>11)value=value.slice(0,11)" />

限制大小(最大值、最小值)
//限制最大值30

<input type="number" oninput="if(value>30)value=30" />

//限制最小值0

<input type="number" oninput="if(value<0)value=0" />

联合限制(限制长度和大小)

//长度2  最大值30 最小值0
<input type="number" oninput="if(value>30)value=30;if(value.length>2)value=value.slice(0,2);if(value<0)value=0" />

 

去除A标签点击的蓝色背景

a标签默认点击是有一个蓝色的背景的 ,如图

,这个东西很烦人 ,那么该如何去除呢,

答案是有的,给a标签的css代码添加下面的属性即可

a{
-webkit-tap-highlight-color: transparent;
    background: transparent;
}

 

 

 

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局相同之处与作用

圣杯布局和双飞翼布局都是三栏布局,但是这个三栏布局是两个宽度不变,中间宽度自适应的布局方式

 

圣杯布局

圣杯布局搭建步骤

  • 1.搞一个容器,里面放三个盒子
  • 2.设置两侧盒子的宽度
  • 3.设置中间盒子的宽度等于容器的宽度(100%)
  • 4.设置容器的padding等于两侧盒子的宽度
  • 5.让三个盒子都在同一方向上浮动
  • 6.设置左面的盒子的margin-left: -100%;
  • 7.通过定位让左面的盒子不要盖住中间的盒子
  • 8.设置右面的盒子的margin-left:负的自身的宽度;
  • 9.通过定位让右面的盒子不要盖住中间的盒子
  • 10.给中间的盒子加一个最小宽度,防止变形
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left, .right{
            width:200px;
            height: 200px;
            background: red;
            float: left;
        }
        .left{
            margin-left: -100%;
            position:relative;
            left: -200px;
        }
        .right{
            margin-left: -200px;
            position:relative;
            left:200px;
        }
        .center{
            width: 100%;
            height: 200px;
            background: skyblue;
            float: left;
            min-width: 400px;
        }
        .box{
            background: purple;
            padding: 0 200px;
            overflow: hidden; /*这一步不是必须的*/
        }
    </style>
</head>
<body>
<div class="box">
    <!--center放最上面,为了让这行代码先读取,因为center一般放图片,让这行代码先读取,用户体验就会好很多-->
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

 

双飞翼布局

双飞翼布局搭建步骤

  • 1.搞一个容器.里面放三个盒子
  • 2.设置两侧盒子的宽度
  • 3.设置中间盒子的宽度等于容器的宽度(100%)
  • 4.让是哪个盒子都在同一个方向上浮动
  • 5.给中间的盒子添加一个子盒子
  • 6.给子盒子设置margin 0 两则盒子的宽度
  • 7.设置左边盒子的margin-left = -100%;
  • 8.设置右边的盒子的margin-left= -自身的宽度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
        }

        .left, .right {
            width: 200px;
            height: 200px;
            background: red;
        }

        .center {
            width: 100%;
            height: 200px;
            background: skyblue;
        }

        .left, .right, .center {
            float: left;
        }

        .center-in {
            margin: 0 200px;
        }

        .left {
            margin-left: -100%;
        }

        .right {
            margin-left: -200px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="center">
        <div class="center-in">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi asperiores blanditiis corporis cum cumque doloremque, esse excepturi illum ipsa magni nesciunt tempora vero. Debitis minus nemo quidem temporibus voluptatibus.
        </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

</body>
</html>

两种布局方式各有优劣性 , 看个人取舍, 我个人更加的喜欢使用双飞翼布局.

扫码使用手机查看

站点统计

  • 文章总数:66 篇
  • 页面总数:8 个
  • 评论总数:4194 条
  • 分类总数:4 个
  • 标签总数:19 个
  • 运行天数:135 天

你凭什么不努力,但又什么都想要~


「温馨提醒您」: 代码千万行,注释第一行。命名不规范,同事泪千行。

阅读统计

  • 9534总阅览数:
  • 11今天阅读数量:
  • 10今天访问者数:

近期文章

文章归档

分类目录

标签云

© 2020 - Sitemap - Privacy Policy