美文网首页
文字跟随光标

文字跟随光标

作者: 升龙无涯 | 来源:发表于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)
    }
    

    相关文章

      网友评论

          本文标题:文字跟随光标

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