鼠标点击出现文字、表情、图片等等等

有些博客点击点击空白处会出现各种文字、表情、小图片等向上飘动，并逐渐消失。

实现起来很简单。

原理：通过点击事件获取pageX、pageY，创建元素（div、span、img等），加入到body中，添加特定class、id名，给定transition/animation从而实现响应效果。

以下是粗糙的实现方式

js：

  useEffect(()=>{
    dom = document.documentElement
    dom.addEventListener('click',handleClick)
    return ()=>{
      dom.removeEventListener('click',handleClick)
    }
  },[])

  function handleClick(e:MouseEvent){
    let text:string = '你'
    switch (count.current){
      case 0:
        text = '你'
        count.current++
        break;
      case 1:
        text = '好'
        count.current++
        break;
      case 2:
        text = '帅'
        count.current++
        break
      case 3:
        text = '我'
        count.current++
        break;
      case 4:
        text = '好'
        count.current++
        break;
      case 5:
        text = '爱'
        count.current = 0
        break
      default:
        text = '你'
        count.current = 0
    }
    let t = document.createTextNode(text)
    let span = document.createElement('span')
    span.id = 'clickSpan'+count.current
    span.className = 'animateSpan span'
    let x = e.pageX
    let y = e.pageY
    span.style.position = 'absolute'
    span.style.top = y - 10 + 'px'
    span.style.left = x - 10 + 'px'
    span.appendChild(t)
    dom.appendChild(span)
    setTimeout(()=>{
      span.style.top = y - 100 + 'px'
      span.style.opacity = '0'
    })
    setTimeout(()=>{
      dom.removeChild(span)
    },1000)

  }

less：

.span{
  position: absolute;
  left: 0;
  top: 0;
  color: #333;
  pointer-events: none;
}
.animateSpan{
  color: red;
  opacity: 1;
  z-index: 999;
  transition: all 1s linear;
}
#clickSpan0{
  color: aqua;
}
#clickSpan1{
  color: sandybrown;
}
#clickSpan2{
  color: darkcyan;
}

效果：

可以根据需求，把文字换成图片或者其他内容。

文章只提供思路，代码可以优化的地方很多，如果要使用，可以根据具体需求优化。