美文网首页
文字跟随光标

文字跟随光标

作者: 升龙无涯 | 来源:发表于2021-08-30 16:07 被阅读0次

最终效果图如下:


文字跟随光标

这个特效没有结构代码,标签和逻辑都在js代码中:

// 在浏览器中移动鼠标 - 创建标签,设置内容和位置,放在鼠标的旁边
document.addEventListener('mousemove', mousemove)
function mousemove() {
    // 每次将之前的span删除掉
    var mouseTag = document.querySelector('.mouseTag');
    // 如果存在就删除
    if(mouseTag) {
        document.body.removeChild(mouseTag)
    }
    // 创建span标签
    var span = document.createElement('span')
    // 为了好识别给span添加类名
    span.className = 'mouseTag';
    // 放入内容
    span.innerText = '我是跟随鼠标移动的标签';
    // 设置span的样式
    // 获取鼠标位置 - 从事件对象中获取
    var e = window.event;
    var x = e.pageX;
    var y = e.pageY;
    span.style.position = 'absolute';
    span.style.left = x + 10 + 'px' 
    span.style.top = y + 10 + 'px' 
    // 将span放到body中
    document.body.appendChild(span)
}

相关文章

  • 文字跟随光标

    最终效果图如下: 这个特效没有结构代码,标签和逻辑都在js代码中:

  • 光标跟随

  • IDEA配置

    光标不跟随 配置环境变量中文跟随 IDEA_JDK_64 D:\Program Files\Java\jdk1.8...

  • EditText使用总结

    获取光标位置 在光标处插入字符 删除光标前字符 选中文字 点击EditText获取焦点显示光标且不弹出软键盘 处理...

  • 光标下划线跟随

  • Android设置EditText光标颜色

    使光标颜色与文字颜色一致

  • 顶部导航光标定位

    当鼠标移入顶部菜单时,菜单顶部有光标跟随,当移出时,光标自动回到当前页面菜单位置 如下图: 线上效果图,查看:顶部...

  • iOS开发常见问题-UITextField

    修改UITextField的光标颜色 UITextField占位文字相关的设置 修改UITextField占位文字...

  • 搜索框光标处理

    IE:不管该行有没有文字,光标高度与font-size一致。 FF:该行有文字时,光标高度与font-size一致...

  • macbook pro使用随记

    18.6.141、快捷查询:将光标停留在需要查询的文字上,使用一个手指用力按下。如果成功,光标下的文字变为黄色底色...

网友评论

      本文标题:文字跟随光标

      本文链接:https://www.haomeiwen.com/subject/dwsbiltx.html