首页html自下向上滚动一首诗；要求居中

html自下向上滚动一首诗；要求居中

时间: 2024-10-01 17:12:06 浏览: 19

HTML中实现自下向上滚动显示诗歌并居中的效果，通常需要结合CSS样式和JavaScript或者jQuery库。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { height: 200px; /* 定义容器的高度 */ overflow-y: scroll; /* 添加垂直滚动条 */ display: flex; justify-content: center; /* 居中内容 */ } .poem { white-space: nowrap; /* 防止换行 */ } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ var poem = "<div class='poem'>你的诗歌内容...</div>"; // 替换为你想要滚动的诗句 $('.container').append(poem); setInterval(function() { $('.container').scrollTop($('.container')[0].scrollHeight); }, 500); /* 每隔500毫秒滚动到底部 */ }); </script> </head> <body> <div class="container"></div> </body> </html> ``` 在这个示例中，`<div class="poem">...</div>`这部分你需要替换为你要滚动显示的实际诗句。这个脚本会在页面加载完成后将诗歌添加到`.container`容器内，并通过设置定时器每500毫秒滚动到容器底部。

阅读全文