最终效果图如下:
文字跟随光标
这个特效没有结构代码,标签和逻辑都在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)
}
网友评论