W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> .slideUp { animation-name: slideUp; animation-name: slideUp; animation-duration: 1s; animation-duration: 1s; visibility: visible; } @keyframes slideUp { 0% { opacity: 0; transform: translateY(70%); } 100% { opacity: 1; transform: translateY(0%); } } body {height:1500px;} .col-1 {float:left} .col-2 {float:left;padding-left:25px;} img {visibility:hidden;} hr {margin-top:400px;} </style> </head> <body> <h1>onscroll 事件</h1> <p>向下滚动此页面。</p> <p>当您从顶部滚动 350 像素时，图像将滑入。</p> <hr> <div class="col-1"> <img id="myImg" src="/i/photo/tulip.jpg" width="300" height="300"> </div> <div class="col-2"> 只是一些文字.. </div> <script> window.onscroll = function() {myFunction()}; function myFunction() { if (document.documentElement.scrollTop > 350) { document.getElementById("myImg").className = "slideUp"; } } </script> </body> </html>