本文介绍了如何利用HTML、CSS和JavaScript构建一个动态的新闻滚动条，通过添加鼠标事件监听器，实现了用户在悬停时暂停滚动、移开后恢复滚动的效果。同时，优化了新闻项的样式设计，增加了小圆点标识及悬停背景色变化，以增强用户的浏览体验。
知识回顾
什么是事件？
事件是指用户与网页进行互动时产生的动作或者变化，这些动作可以是鼠标点击、键盘按键、窗口改变等等。在现代网页中，事件是实现动态交互的重要组成部分。事件的出现使得网页能够响应用户操作，提升用户体验。例如，用户在网页上点击按钮后触发一个弹窗，或者在输入框中输入数据时实时显示提示信息，都是通过事件来实现的。
事件类型
1. 鼠标事件
- click: 当鼠标单击元素时触发。
- dblclick: 双击元素时触发。
- mouseover: 鼠标指针移动到元素上时触发。
- mouseout: 鼠标指针离开元素时触发。
- mousemove: 鼠标在元素内移动时触发。
- mousedown: 按下鼠标按钮时触发。
- mouseup: 鼠标按钮松开时触发。
2. 键盘事件
- keydown: 按下键盘按键时触发。
- keypress: 按下可打印字符的键时触发（在现代浏览器中不常用）。
- keyup: 松开键盘按键时触发。
3. 表单事件
- submit: 表单提交时触发。
- change: 表单元素的值变化时触发（如文本框、下拉框）。
- focus: 元素获得焦点时触发。
- blur: 元素失去焦点时触发。
- Reset: 表单重置。
- input: 输入框内容变化时触发。
4. 文档/窗口事件
- load: 当页面完全加载时触发。
- unload: 当用户离开页面时触发。
- resize: 窗口大小改变时触发。
- scroll: 页面滚动时触发。
5. 触摸事件（移动设备）
- touchstart: 手指触摸屏幕时触发。
- touchmove: 手指在屏幕上移动时触发。
- touchend: 手指离开屏幕时触发。
6. 其他事件
- contextmenu: 鼠标右键点击时触发。
- wheel: 鼠标滚轮滚动时触发。
- copy: 复制操作时触发。
- paste: 粘贴操作时触发。
事件句柄
事件句柄（Event Handler）是JavaScript中用于响应特定事件的函数。当某个事件发生时，事件句柄会被调用以执行相应的代码。
请注意，事件句柄还可以通过addEventListener方法来添加，这种方法更为灵活，允许为同一事件添加多个处理函数。例如：element.addEventListener('click', function() { ... });
| 事件类型 | 事件句柄示例 | 描述 |
|---|---|---|
| 点击事件 | element.onclick = function() { ... } | 当用户点击某个元素时触发。 |
| 鼠标移动 | element.onmousemove = function() { ... } | 当鼠标指针在某个元素上移动时触发。 |
| 键盘按下 | element.onkeydown = function() { ... } | 当键盘上的键被按下时触发。 |
| 输入事件 | element.oninput = function() { ... } | 当元素的值发生变化时触发，通常用于表单输入元素。 |
| 加载完成 | window.onload = function() { ... } | 当页面或图像完成加载时触发。 |
| 提交表单 | form.onsubmit = function() { ... } | 当表单被提交时触发。 |
| 失去焦点 | element.onblur = function() { ... } | 当元素失去焦点时触发。 |
| 获得焦点 | element.onfocus = function() { ... } | 当元素获得焦点时触发。 |
| 鼠标悬停 | element.onmouseover = function() { ... } | 当鼠标指针悬停在某个元素上时触发。 |
| 鼠标移出 | element.onmouseout = function() { ... } | 当鼠标指针移出某个元素时触发。 |
事件的工作原理
JavaScript的事件处理依赖于文档对象模型（DOM）和事件流。事件流有三个阶段：
- 捕获阶段：事件从根节点开始向下传播，直到达到目标节点。在这个阶段，只有加入了捕获事件处理程序的节点会被触发。
- 目标阶段：事件到达目标节点，此时目标节点的事件处理程序被执行。
- 冒泡阶段：事件从目标节点向上返回，直到根节点。在这个阶段，嵌套的父节点的事件处理程序会被触发。
事件处理
静态指定
静态指定事件处理通常指的是在HTML代码中直接通过属性来指定事件处理函数。这种方法简单明了，但在维护和管理复杂的事件逻辑时可能会显得不够灵活。静态指定事件处理的方式在HTML中非常常见。 例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态指定事件处理示例</title>
</head>
<body>
<label for="myInput">请输入内容:</label>
<input type="text" id="myInput" name="myInput">
<button onclick="displayInputValue()">显示输入内容</button>
<script>
function displayInputValue() {
// 获取文本输入框的值
var inputValue = document.getElementById('myInput').value;
// 在控制台中输出该值
console.log('输入的值是: ' + inputValue);
}
</script>
</body>
</html>
动态指定
在JavaScript中，可以通过事件处理程序来响应上述事件。事件处理程序可以使用addEventListener方法添加。
语法：
element.addEventListener(event, function, useCapture);
- element：要添加事件监听器的DOM元素。
- event：事件的类型（如
click、mouseover、keydown等），字符串形式，不带on前缀。 - function：事件触发时要执行的函数。
- useCapture（可选）：布尔值，指定事件是在捕获阶段还是冒泡阶段执行。默认值为
false，表示在冒泡阶段执行。
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态指定事件处理示例</title>
</head>
<body>
<label for="myInput">请输入内容:</label>
<input type="text" id="myInput" name="myInput">
<button id="myButton">显示输入内容</button>
<script>
// 动态添加事件处理函数
document.getElementById("myButton").addEventListener("click", function(event) {
console.log(event.target); // 获取触发事件的元素
console.log(event.type); // 获取事件类型
});
</script>
</body>
</html>
任务描述
新闻滚动制作
-
新闻内容样式：
- 每条新闻内容使用
<p>标签包裹，设置上下内边距，并在每条新闻之间添加边框以区分。 - 为每条新闻前添加一个小圆点标识。
- 鼠标悬停在新闻内容上时更改背景颜色，以提供更好的用户体验。
- 每条新闻内容使用
-
交互效果：
- 通过JavaScript添加鼠标事件，使用户在鼠标悬停在新闻区域时暂停滚动动画，移开后恢复滚动。
- 通过JavaScript添加鼠标事件，使用户在鼠标悬停在新闻区域时暂停滚动动画，移开后恢复滚动。
任务实施
编写index.html
<div class="news-container" id="newsContainer">
<div class="news" id="news">
<p>营商环境“湘”当好！一图读懂《湖南省优化营商环境条例》</p>
<p>湖南：产教融合助力先进制造</p>
<p>“智汇潇湘 才聚湖南”湖湘名企省外名校行在西安启动</p>
<p>长沙已累计建成5G基站3.7万个</p>
<p>守正创新，构筑中华文化的新高峰</p>
<p>漫步澳门历史城区 触摸文化交融脉搏</p>
<p>汗血马女骑士：我和“旋风”一起奔跑</p>
<p>广州地铁安检突然变严，不少市民称影响出行</p>
<p>蔡国强烟花表演无人机坠落，村委会：都有定位，有村民捡到送回</p>
<p>出海，看网络文学湘军如何“乘风破浪”</p>
<p>从几近消亡到美翻全网，看婺源篁岭古村的“华丽转身”</p>
<p>湖南省微短剧拍摄取景地首批名单揭晓 “微短剧+”赋能文旅</p>
<p>文明交通携手共创 湖南各地"全国交通安全日"宣传活动精彩纷呈</p>
<p>21名！湖南省教育厅所属事业单位公开选调工作人员</p>
<p>省一笔住宿费！来长沙找工作，这些地方可以免费住！</p>
</div>
</div>
编写样式:news.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使内容垂直居中 */
margin: 0;
background-color: #f4f4f4; /* 可选背景颜色 */
}
.news-container {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 260px; /* 调整高度以适应10条新闻的显示 */
overflow: hidden;
border: 1px solid #ccc;
border-radius: 10px;
background: white;
}
.news {
animation: scroll 15s linear infinite; /* 设置动画时长 */
}
.news p {
margin: 0;
padding: 10px 10px 10px 20px; /* 左侧增加padding */
border-bottom: 1px solid #eee;
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.news p::before {
content: '•'; /* 使用小圆点 */
color: #db3434; /* 设置圆点颜色 */
font-size: 20px; /* 圆点大小 */
margin-right: 10px; /* 圆点与文字之间的间距 */
}
@keyframes scroll {
0% { transform: translateY(0); }
100% { transform: translateY(-66.6%); } /* 根据实际需要调整滑动比例 */
}
p:hover {
background-color: #f3bebe; /* 鼠标悬停时背景颜色 */
}
编写js代码块
<script>
//获取元素
const newsContainer = document.getElementById("newsContainer");
const news = document.getElementById("news");
// 开始和停止动画的自定义函数
function startScroll() {
news.style.animationPlayState = "running";
}
function stopScroll() {
news.style.animationPlayState = "paused";
}
// 添加鼠标事件
newsContainer.addEventListener("mouseover", stopScroll);
newsContainer.addEventListener("mouseout", startScroll);
</script>
