沉默者cyz 2022-09-21 20:59 采纳率: 50%
浏览 84
已结题

请问如何用HTML和JS实现鼠标触碰文字跳动

使用JavaScript，当鼠标滑动到文字上（p元素）时，改变该元素的align属性，使文字左右跳动，实现动态效果。

img

img

  • 写回答

2条回答 默认 最新

  • AReTrnA 2022-09-21 21:22
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #f,#p {
            position: absolute;
            top: 10px;
            padding: 0;
            margin: 0;
        }
        #p {
            width: 90%;
        }
        #f {
            color: transparent;
            user-select: none;
            cursor: default;
        }
    </style>
</head>
<body>
    <p id="p" align="left">跳动的文字</p>
    <font id="f" color="transparent">跳动的文字</font>
    <script>
        document.getElementById("f").onmouseenter = () => {
            document.getElementById("p").align = "right";
        }
        document.getElementById("f").onmouseleave = () => {
            document.getElementById("p").align = "left";
        }
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

  • html5 canvas绘制管道里跳动发光小球动画特效源码.zip
    2022-11-03 23:31
    这个“html5 canvas绘制管道里跳动发光小球动画特效源码.zip”文件显然包含了一个使用HTML5 Canvas实现的动态效果，即在管状背景中绘制一个或多个跳跃并发光的小球动画。以下将详细介绍相关的HTML5 Canvas知识点。 ...
  • js实现网页回弹小球效果
    2021-11-17 16:46
    soberw-的博客 运行页面会首先弹出一个输入框，询问用户想要产生的小球数量，随后后台就会产生指定数量的小球，在页面中来回跳动，触碰到页面边框时，就会回弹，且产生的小球颜色随机，小球在页面中的位置随机，小球运行的速度随机...
  • 网页鼠标点击任何一个地方弹出文字动画效果图文教程
    2023-01-25 21:50
    天 道的博客 访问别人的网站看到网页鼠标点击任何一个地方会弹出文字效果挺好看，测试了百度上的别人写的代码后简单写个教程记录下，需要的朋友亲自试试吧！复制粘贴代码到网页标签中的任何一个地方。
  • HTML5+CSS3静态网页开发 —— 慕云游项目
    2023-07-19 23:39
    明哥.的博客 在项目中，使用了一些HTML5和CSS3的新功能和特性来创建一个具有现代化外观和交互性的网页。使用语义化的HTML结构：在项目中，我们遵循了HTML5的语义化标签，如等来更好地描述页面的结构和内容。
  • 从0到1实现H5游戏
    2022-07-19 12:29
    幽幽Yeats的博客 我将这款游戏命名为herald（先驱），玩家可以在界面右上角改变操控模式（鼠键模式和声音模式），通过鼠标点击、空格键、↑键以及声音控制herald（herald即移动的黑色小方块，以下皆由herald代指黑色小方块）跳动，...
  • 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
    2021-12-12 23:40
    jason的java世界的博客 1.2.1前端 1.2.2后台 1.2.3 浏览器 1.3 纯文本和超文本的使用 1.4 开发工具的使用 1.4.1常见开发工具简介 1.4.2 Visual Studio Code 1.4.3 编写第一个HTML文件 1.5 HTML骨架 1.5.1 DTD 1.5.2 html标签 1.5.3 字符集 ...
  • 按钮抖动动画效果
    2022-09-29 17:56
    跳动的世界线的博客 在作需求时要尽量未雨绸缪，按钮触发等操作不仅要考虑防抖，接口返回状态loading状态防止重复点击等，还要发挥前端优势，尽力让用户使用起来舒适。 <template> 抖动</el-button> </template> <script> methods: { ...
  • 有趣的小米网站
    2022-05-23 09:39
    txq231254的博客 它可以使页面跳动起来，感觉效果应该会不错。所以就来尝试了一下，感受JavaScript带来的美好体验。 一、首页顶部布局和 这个首页我是大体分为 header 和 banner两个部分，然后再将header拆分为了头部分（head）...
  • 前端学习笔记
    2021-10-19 11:38
    兆兆兆兆兆鹏的博客 外部JS引入当前Vue实例 函数中传this指向就好了 forEach没有返回值要有返回值的话用map git checkout -b dev origin/dev 建立分支并且从远程拉取 APP的组件生命周期与小程序有出入 scroll view 有滑动时间并把sc
  • 分享88个鼠标特效，总有一款适合您
    2024-02-12 20:22
    灬沙海灬的博客 分享88个鼠标特效，总有一款适合您
  • 后台垂直导航样式
    2013-03-21 13:17
    1. **实现方式**：后台垂直导航样式通常由前端开发人员使用HTML、CSS和JavaScript（或者相关的前端框架如Bootstrap、Element UI等）来构建。HTML用于结构化菜单内容，CSS用于美化样式，JavaScript则用来添加交互性，...
  • threejs点击模型实现模型边缘高亮的选中效果--更改后提
    2023-08-09 11:03
    愤怒的小青春的博客 考察知识点：数组题目分析：由于可以根据k值判断数组中数的范围(0 ~ k - 1)，可以使用计数的方法，先遍历一遍数组，将每个数出现的次数记录下来，然后按照从小。题干要求计算素因子的和，n个数，每个数都可能有若干...
  • 从销售、HR转行，我要掌握一门安身立命的技术！
    2021-06-30 09:30
    传智播客的博客 JavaEE HTML&JS+前端 Python+大数据开发 人工智能开发 UI/UE设计 软件测试 新媒体+短视频直播运营 产品经理 Linux云计算+运维开发 智能机器人软件开发 电商视觉运营设计 / _ - 推荐阅读 - 黑马价值50w的Java全家桶...
  • javascript 原生常用api 数组方法大全
    2017-10-24 23:05
    非假非空的博客 html> head> meta charset="UTF-8"> ... script type="text/javascript"> var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ]; var newArr
  • 分享116个JS特效动画效果，总有一款适合您
    2023-02-05 16:09
    灬沙海灬的博客 js
  • 学了点技术，我要开始装X了
    2021-08-27 08:30
    YvetteLau的博客 今天不看技术文，而是带大家装x，就从獨釣寒江雪 的《前端装逼技巧 108 式》偷师几招吧~ 绝对让你过把瘾！作者：獨釣寒江雪原文：https://segmentfault.com/a/1...
  • css3
    2019-10-06 15:28
    dazhoufu9292的博客 CSS修改选中文字的颜色 html代码： <p class="p1">第一段文字选中效果</p><p class="p2">第二段文字选中效果</p> css代码： .p1::selection{background:red;color:#fff;} .p2::...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 9月21日
  • 已采纳回答 9月21日
  • 修改了问题 9月21日
  • 创建了问题 9月21日