首页 前端知识 简单的 HTML 代码实现文字滚动效果

简单的 HTML 代码实现文字滚动效果

2024-04-12 20:04:19 前端知识 前端哥 387 986 我要收藏

分析下面这段 HTML 代码的作用。请详细介绍里面关键的语法。不少于 2800 字。你的回复请满足这两点要求:第一点是你的回复文本里,中文字符和英文字符之间要留一个空格。第二点是你的回复文本里所有成对匹配的英文双引号 " 必须替换为特殊符号 `。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        h1 {
            font-size: 24px;
        }

        #container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        #code-container {
            border: 1px solid #ccc;
            padding: 5px;
            white-space: pre-wrap;
            font-size: 14px;
        }

        button {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }

        button:hover {
            background-color: #555;
        }

        .container {
            width: 30em;
            height: 13em;
            margin: 0.5em auto;
            overflow: hidden;
            background: #ffffff;
            position: relative;
        }

        .slider {
            top: 1em;
            position: relative;
            box-sizing: border-box;
            animation: slider 40s linear infinite;
            list-style-type: none;
            text-align: center;
        }

        .slider:hover {
            animation-play-state: paused;
        }

        @keyframes slider {
            0% {
                top: 1em
            }

            100% {
                top: -35em
            }
        }

        .blur .slider {
            margin: 0;
            padding: 0 1em;
            line-height: 0em;
        }

        .blur:before,
        .blur::before,
        .blur:after,
        .blur::after {
            left: 0;
            z-index: 1;
            content: '';
            position: absolute;
            width: 100%;
            height: 2em;
            background-image: linear-gradient(180deg, #FFF, rgba(255, 255, 255, 0));
        }

        .blur:after,
        .blur::after {
            bottom: 0;
            transform: rotate(180deg);
        }

        .blur:before,
        .blur::before {
            top: 0;
        }

        p {
            font-family: helvetica, arial, sans serif;
        }
    </style>
</head>

<body>

    <div id="container">
        <div id="code-container">
            <!-- The HTML code will be displayed here -->
        </div>

        <button id="execute-button">View the message</button>
    </div>

    <script>
        const codeContainer = document.getElementById('code-container');
        const executeButton = document.getElementById('execute-button');

        // Sample HTML code to display initially
        const initialHTMLCode = `
        <div class="container blur">
            <ul class="slider">
                <li><p> 第一行</p></li>
                <li><p> 第二行</p></li>
                <li><p> 第三行</p></li>
                <br/>
            </ul>
            <ul class="slider">
                <li><p> 第四行 </p></li>
                <li><p> 第五行</p></li>
                <br/>
            </ul>
            <ul class="slider">
                <li><p> 第六行 </p></li>
                <br/>
            </ul>
            <ul class="slider">
                <li><p> 2</p></li>
            </ul>
            <ul class="slider">
                <li><p> </p></li>
                <li><p> 再见</p></li>
            </ul>
        </div>
        `;

        // Function to execute HTML code
        function executeHTMLCode() {
            codeContainer.innerHTML = initialHTMLCode;
            executeButton.style.display = 'none';
        }

        // Event listener for the Execute button
        executeButton.addEventListener('click', executeHTMLCode);

        // Set the initial HTML code 
        codeContainer.innerText = initialHTMLCode;
    </script>
</body>

</html>


这段HTML代码主要是一个网页的源代码,用于展示一个简单的网页界面,其中包含了HTML、CSS和JavaScript。我会逐步详细介绍这段代码的作用和关键语法。

1. **文档声明和语言设置**:
   - `<!DOCTYPE html>`:这是HTML5的文档类型声明,表示这是一个HTML5文档。
   - `<html lang="en">`:定义了HTML文档的根元素,指定了文档的语言为英语。

2. **文档头部信息**:
   - `<head>`:文档的头部部分,通常包含了一些元信息。
   - `<meta charset="UTF-8">`:指定文档的字符集为UTF-8,以支持各种字符。
   - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`:设置视口(viewport)的属性,用于响应式设计,让网页在不同设备上显示合适。
   - `<title>Adieu from Sherwin Varghese</title>`:设置网页的标题,将在浏览器标签页上显示。

3. **内联CSS样式**:
   - `<style>`:内联CSS样式块,定义了网页的样式。
   - 在样式中定义了`body`、`header`、`h1`、`#container`等元素的样式,包括字体、背景色、边距、填充等。

4. **网页主体内容**:
   - `<body>`:文档的主体部分,包含了网页的实际内容。
   - `<div id="container">`:一个`div`元素,带有一个id属性,用于容纳网页的内容。
   - `<div id="code-container">`:另一个`div`元素,带有id属性,用于显示HTML代码。

5. **按钮与JavaScript交互**:
   - `<button id="execute-button">View the message</button>`:一个按钮,带有id属性,用于触发JavaScript事件。
   - `<script>`:包含了JavaScript代码,用于在按钮点击时将HTML代码插入到`code-container`中。

6. **JavaScript代码**:
   - JavaScript代码块用于实现按钮点击事件。
   - 通过`document.getElementById`获取按钮和代码容器的引用。
   - 定义了一个包含HTML代码的字符串`initialHTMLCode`。
   - 定义了一个函数`executeHTMLCode`,用于将HTML代码插入到`codeContainer`中,并隐藏按钮。
   - 添加了一个按钮点击事件监听器,点击按钮后执行`executeHTMLCode`函数。
   - 最后,将初始HTML代码插入到`codeContainer`中。

7. **内联CSS样式**:
   - 在HTML代码字符串中,包含了一段内联的CSS样式,用于定义页面中的文本滚动动画效果。
   - 使用CSS的`@keyframes`定义了名为`slider`的动画,用于控制文本滚动。
   - 使用伪类和伪元素对文本进行样式设置,实现了文本模糊渐变效果。

8. **注释**:
   - 在HTML和JavaScript代码中,有注释用于解释代码的功能和目的。

整个HTML文件的主要功能是创建一个包含一段文本滚动的页面。用户可以点击按钮,触发JavaScript事件,将包含文本滚动效果的HTML代码插入到指定的`code-container`中。

这段代码示例还包括了一些基本的HTML元素、CSS样式和JavaScript事件处理,适合用于教学或演示网页开发的基本概念。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4766.html
标签
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!