文字跟随光标

最新推荐文章于 2024-08-11 18:40:36 发布

HAI6545

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量208

点赞数 1

分类专栏： JavaScript案例文章标签： javascript css html

本文链接：https://blog.csdn.net/HAI6545/article/details/122220568

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
<script src="./js/utils.js"></script>
<script>
// 给浏览器绑定移动事件
document.onmousemove = function(){
    // 获取span
    var active = document.querySelector('span.active');
    if(active){
        active.parentElement.removeChild(active)
    }
    // 获取鼠标位置
    var x = window.event.pageX
    var y = window.event.pageY

    // 创建标签
    var span = document.createElement('span')
    // 给span设置类名
    span.className = 'active'
    // 设置样式
    setStyle(span, {
        position: 'absolute',
        left: x + 15 + 'px',
        top: y + 15 + 'px'
    })
    // 设置内容
    span.innerText = '我是跟随鼠标的文字'
    // 将span放在body中
    document.body.appendChild(span)
}

</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HAI6545

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字跟随光标

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body><script src="./js/utils.js"></script><script>// 给浏览器绑定移动事件doc.
复制链接

扫一扫