20、网页特效：滚动效果与状态栏消息的实现

最新推荐文章于 2025-07-13 10:58:14 发布

backprop5master

最新推荐文章于 2025-07-13 10:58:14 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript去神秘化：从零开始的编程之旅文章标签：滚动效果 Rollovers 状态栏消息

本文链接：https://blog.youkuaiyun.com/backprop5master/article/details/149372900

JavaScript去神秘化：从零开始的编程之旅专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

网页特效：滚动效果与状态栏消息的实现

1. 滚动效果（Rollovers）

1.1 滚动效果概述

滚动效果是一种可以让网页生动起来的技术。当用户将鼠标指针移动到网页上的某个对象时，浏览器会触发 onmouseover 事件；而当鼠标指针移开该对象时，会触发 onmouseout 事件。我们可以通过为 <IMG> 标签和锚标签的 onmouseover 和 onmouseout 属性赋值，来指定在这些事件发生时要执行的操作。

1.2 创建文本滚动效果

要创建文本的滚动效果，可以使用 <A> 标签（锚标签）的 onmouseover 属性。以下是一个示例，展示如何在鼠标悬停在书名上时显示相应书籍的封面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Rollover Text</title>
</head>
<body>
   <TABLE width="100%" border="0">
      <TBODY>
         <