文字跟随光标

2021-08-30  本文已影响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)
}
上一篇 下一篇

猜你喜欢

热点阅读