日常功能 通知栏滚动的功能 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src='./js/jq.js'></script>
        <style>
            .gonggao { position: absolute;width: 300px;height: 35px;overflow: hidden; }
            .gonggao .gonggao_model {
                height: 100%;
            
            }
            
            .gonggao.dh > div {
                animation: gonggao_animate 1s linear forwards;
            }
            
            @keyframes gonggao_animate{
                from{ transform: translateY(0); }
                to{ transform: translateY(-100%); }
            }
        </style>
    </head>
    <body>
        <div class='gonggao'>
            <div class='gonggao_model'>测试公告1</div>
        </div>
        
        <div style='position:absolute;top: 50px;'>
            <input type='text' id='test' onchange=' testadd(this) '  />
            <button>显示</button>
        </div>
    </body>
    
    <script>
        var add = function(name){
            var div = document.createElement("div");
            div.className = "gonggao_model";
            div.innerText = name;
            var gonggao = document.body.querySelector(".gonggao");
            gonggao.appendChild(div);
            gonggao.classList.add("dh");
            setTimeout(()=>{
                div.previousElementSibling.remove();
                gonggao.classList.remove("dh");
            },1000)
        }
        
        var testadd = function(dom){
            add( dom.value ) ;
        }
        
    </script>
</html>

简单的一个轮播小东西  用来放通知的

posted @ 2020-09-21 10:21  blurs  阅读(375)  评论(0)  编辑  收藏  举报