日常功能 通知栏滚动的功能
<!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>
简单的一个轮播小东西 用来放通知的