css 笔记

1.after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/

　　　　content: '';

　　　　display:block;

　　　　height:0;

　　　　clear:both;

　　　　visibility:hidden;

　　}

　　.clearfix{

　　　　*zoom:1;    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

　　}
View Code

 2.iphone 手机 输入键无效

// input 标签属性加上
-webkit-user-select:text !important;

 3.按钮点击后添加 loading... 效果，禁用点击事件

<div class="btn" onclick="add()">click me</div>

<style>
    .btn,
    .btn::before {
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 3px;
        color: #fff;
        background: #5ad;
    }
    .btn {
        position: relative;            
        cursor: pointer;
    }
    .btn::before {
        content: "loading...";
        position: absolute;
        display: none;
        z-index: 2;
        top: 0;
        left: 0;
    }
    .btn.btnLoading{
        /* 显示 loading... 时，按钮点击事件不起作用 */
        cursor:not-allowed;
        pointer-events: none;
    }
    .btn.btnLoading::before {
        display: block;
    }
</style>

<script>
    $(function () {
        var timer;
        $('.btn').on('click', function () {
            $('.btn').addClass('btnLoading');

            timer = setTimeout(function () {
                $('.btn').removeClass('btnLoading');
                clearTimeout(timer);
            }, 6000);
        });
    });

    function add(){
        alert(111);
    }
    </script>
</body>
View Code

 4.video 标签自带下载按钮去掉

方法一：css样式
<style type="text/css">
            video::-internal-media-controls-download-button {
                display:none;
            }
            video::-webkit-media-controls-enclosure {
                overflow:hidden;
            }
            video::-webkit-media-controls-panel {
                width: calc(100% + 30px);
            }
 </style>
方法二：pc 端，可以用video标签controlsList属性
<video controls controlsList="nodownload"></video>
View Code

 5.显示遮罩层播放视频

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
<style>
     #shadow{
          position: absolute;
          opacity: 0.5;
          filter:alpha(opacity=50);
          top: 0;
          bottom:0;
          left: 0;
          right: 0;
          
          background:black;
          z-index: 100;
          display: none;
     }
     .shadow-shut{
          position: absolute;
          display:none;
          top:5px;
          right: 5px;
          height:30px;
          width:30px;
          text-align: center;
          line-height: 25px;
          font-size:25px;
          border-radius: 15px;
          color: #fff;
          z-index: 120;
     }
     .video-area{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          padding: 0;
          margin: 0;
          width:100%;
          display: none;
          z-index: 120;
     }
</style>
</head>
<body style="height: 2000px;">
     <button id="btn">开始</button>
     <div id="shadow"></div>
     <div class="shadow-shut" id="shadow-shut">x</div>
     <div class="video-area" id="video-area">
          <video id="video1" autoplay="autoplay" src="" style="margin:0;padding:0;width: 100%;"></video>
     </div>
     <script>
          var btn = document.getElementById('btn');
          var shadow= document.getElementById('shadow');
          var shadowShut= document.getElementById('shadow-shut');
          var videoArea=document.getElementById('video-area');
          btn.onclick=function () {
               shadow.style.display='block';
               shadowShut.style.display='block';
               videoArea.style.display='block';
          }
          shadowShut.onclick= function () {
               shadow.style.display='none';
               shadowShut.style.display='none';
               videoArea.style.display='none';
          }
      </script>
</body>
</html>
View Code

 6.JS 事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件委托</title>
</head>
<script>
    window.onload = function(){
        var oBtn = document.getElementById("btn");
        var oUl = document.getElementById("ul1");
        oUl.onclick = function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = "#777";
            }
        };
        //添加新节点
        oBtn.onclick = function(){
            var oLi = document.createElement('li');
            oLi.innerHTML = (Math.random()*100).toFixed(0);
            oUl.appendChild(oLi);
        };
    }
</script>
<body>
    <input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
        <li>初始值</li>
    </ul>
</body>
</html>
View Code

 7.水波纹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .waves{
            position:relative;
            cursor:pointer;
            display:inline-block;
            overflow:hidden;
            text-align: center;
            -webkit-tap-highlight-color:transparent;
            z-index:1;
        }
        .waves .waves-animation{
            position:absolute;
            border-radius:50%;
            width:25px;
            height:25px;
            opacity:0;
            background:rgba(255,255,255,0.3);
            transition:all 0.7s ease-out;
            transition-property:transform, opacity, -webkit-transform;
            -webkit-transform:scale(0);
            transform:scale(0);
            pointer-events:none
        }
        .ts-btn{
            width: 200px;
            height: 56px;
            line-height: 56px;
            background: #f57035;
            color: #fff;
            border-radius: 5px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
            var duration = 750;
            // 样式string拼凑
            var forStyle = function(position){
                var cssStr = '';
                for( var key in position){
                    if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
                };
                return cssStr;
            }

            // 获取鼠标点击位置
            var forRect = function(target){
            var position = { top:0, left:0}, ele = document.documentElement;

            'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
            return {
                top: position.top + window.pageYOffset - ele.clientTop,
                left: position.left + window.pageXOffset - ele.clientLeft
            }
        }

            var show = function(event){
                var pDiv = event.target;
                var cDiv = document.createElement('div');
                pDiv.appendChild(cDiv);
                var rectObj = forRect(pDiv);
                var _height = event.pageY - rectObj.top;
                var _left = event.pageX - rectObj.left;
                var _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
                var position = {
                    top: _height+'px',
                    left: _left+'px'
                };
                cDiv.className = cDiv.className + " waves-animation",
                cDiv.setAttribute("style", forStyle(position)),
                position["-webkit-transform"] = _scale,
                position["-moz-transform"] = _scale,
                position["-ms-transform"] = _scale,
                position["-o-transform"] = _scale,
                position.transform = _scale,
                position.opacity = "1",
                position["-webkit-transition-duration"] = duration + "ms",
                position["-moz-transition-duration"] = duration + "ms",
                position["-o-transition-duration"] = duration + "ms",
                position["transition-duration"] = duration + "ms",
                position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                cDiv.setAttribute("style", forStyle(position));
                var finishStyle = {
                    opacity: 0,
                    "-webkit-transition-duration": duration + "ms",
                    "-moz-transition-duration": duration + "ms",
                    "-o-transition-duration": duration + "ms",
                    "transition-duration": duration + "ms",
                    "-webkit-transform" : _scale,
                    "-moz-transform" : _scale,
                    "-ms-transform" : _scale,
                    "-o-transform" : _scale,
                    top: _height + "px",
                    left: _left + "px",
                };
                setTimeout(function(){
                    cDiv.setAttribute("style", forStyle(finishStyle));
                    setTimeout(function(){
                        pDiv.removeChild(cDiv);
                    },duration);
                },100)
            }
            
            document.querySelector('.waves').addEventListener('click',function(e){
                show(e);
            },!1);
        },!1);
    </script>
<body>
    <a class="waves ts-btn">Press me!</a>
</body>
</html>
View Code

 



posted on 2021-09-05 20:58  每天加1  阅读(17)  评论(0)  编辑  收藏  举报