【原生js】划过单词+匹配文章关键字，连线+高亮显示

最新推荐文章于 2022-09-23 10:13:48 发布

画龍丶

最新推荐文章于 2022-09-23 10:13:48 发布

阅读量243

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45922009/article/details/119823993

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

需求：划过词语匹配文章关键字，连线+高亮显示

思路：功能拆分，先实现划过高亮，然后实现连线。

灵感来源：

1.匹配单词高亮

2.元素之间连线

3.同事指导了两句

4.睡一觉

在此感谢二位大佬分享的文章

下面融合两篇文章的精髓并删删改改，完成功能。上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      body,
      html {
        width: 100%;
        height: 100%;
      }
      .one {
        position: absolute;
        top: 200px;
        left: 100px;
        width: 200px;
        height: 200px;
        font-size: 50px;
        background-color: rgb(105, 206, 118);
      }
      .two {
        position: absolute;
        top: 100px;
        left: 800px;
        width: 200px;
        height: 200px;
        font-size: 50px;
        background-color: chocolate;
        cursor: pointer;
      }
      svg {
        width: 100%;
        height: 100%;
      }
      p{
        font-size: 20px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
   <p> 如果你喜欢交互式的东西，你也可以查阅这个 Scrimba 上的系列教程，它揉合了录屏和代码试验田，并允许你随时暂停和播放。</p>
    <!-- <div class="one">Scrimba</div> -->
    <div class="one">揉合</div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <line id="line" style="stroke:rgb(0, 81, 255);stroke-width:3" />
    </svg>
  </body>
  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    //先把线隐藏
   $("#line").css('visibility','hidden')  

     var  word =  $(".one").html()
      var text = $("p")
// 划过事件
     $(".one")[0].onmouseover  = function() {
      //  获取字段并匹配变色
      var texts = $("p").html().split(word)
      text.html(texts.join('<span style="background:#777bce;font-size:30px;" class = "word">' + word + '</span>')) 


      // 获取屏幕点位并且连线
    var startX = $(".one").offset().left;
    var startY = $(".one").offset().top;
    var endX = $(".word").offset().left;
    var endY = $(".word").offset().top/4;
    console.log("startX", startX);
    console.log("startY", startY);
    console.log("endX", endX);
    console.log("endY", endY);
    $("#line").attr({ x1: startX, y1: startY, x2: endX, y2: endY});
    $(".word").css({ left: endX, top: endY });
    $("#line").attr({ x1: startX, y1: startY, x2: endX, y2: endY});
    // 显示线段
    $("#line").css('visibility','visible')
    };
    // 划出事件
    $(".one")[0].onmouseout = function(){
        // 文章恢复原样
      text.html(text.text())
         //线隐藏线段
   $("#line").css('visibility','hidden')  
    }
  </script>
</html>

总结：功能第一眼看上去好像不会，仔细想想把他拆分开来发现还行。也就那样。

不过听同事说canvas好像很厉害干了很多之前html不能干的事，拓展了html的生态圈。

在这里插入图片描述

画龍丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【原生js】划过单词+匹配文章关键字，连线+高亮显示

需求：划过词语匹配文章关键字，连线+高亮显示思路：功能拆分，先实现划过高亮，然后实现连线。灵感来源：1.匹配单词高亮2.元素之间连线3.同事指导了两句3.睡一觉在此感谢二位大佬分享的文章下面融合两篇文章的精髓并删删改改，完成功能。上代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont
复制链接

扫一扫

专栏目录