两行代码实现鼠标光标特效

百劼欣成_

已于 2024-04-24 12:23:36 修改

阅读量271

点赞数 4

文章标签： json html5 javascript css

于 2024-04-23 21:49:31 首次发布

本文链接：https://blog.csdn.net/2201_75933297/article/details/138139414

版权

优势：

1、兼具灵活性与简便性，你可以通过参数设置大小、图片、尾迹速度。如果不想设置的话，都有个人设置的默认值，只要有一张图片地址即可。

2、利用requestAnimationFrame与节流函数，使动画顺畅

3、点击特效，下次再发

源码：

main.js

class Img_Mouse{
    /**
     * @param {String} mouse_img_url -图片地址
     * @param {String} wake_img_url -尾迹图片地址
     * @param {Number} width_mouse-宽
     * @param {Number} hight_mouse -高
     * @param {Object} option -配置  item_hight，item_width，item_speed分别是尾迹的高，宽，产生速度
    */
    constructor(mouse_img_url,wake_img_url,width_mouse,hight_mouse,option={'item_hight':30,'item_speed':50,'item_width':30}){
        this.mouse_img_url=mouse_img_url
        this.wake_img_url=wake_img_url
        this.width_mouse=width_mouse
        this.hight_mouse=hight_mouse
        this.mouse_now_top=0
        this.mouse_now_left=0
        this.option=option
    }
    init(){
        let mouse_box=document.createElement('div')
        mouse_box.style.position='absolute'
        mouse_box.style.zIndex='1999'
        let mouse_box_img=`
        <img src='${this.mouse_img_url}' style='width:${this.width_mouse}px;hight:${this.hight_mouse};'>
        `
        mouse_box.style.pointerEvents='none'
        mouse_box.innerHTML=mouse_box_img
        document.querySelector('body').appendChild(mouse_box)
        document.querySelector('body').style.cursor='none'
        let add_wake_de= this.throttle_fun(this.add_wake,this.option.item_speed)//100是尾迹的产生速度
        window.addEventListener('mousemove',(e)=>{
            mouse_box.style.display='block'
            requestAnimationFrame(()=>{
            mouse_box.style.transform= `translate(${e.offsetX}px,${e.clientY}px)`
            this.mouse_now_left=e.offsetX
            this.mouse_now_top=e.offsetY
            add_wake_de(e.offsetX,e.offsetY)
            })
        })
        document.querySelector('body').addEventListener('mouseout',()=>{
            mouse_box.style.display='none'
        })
    }
    throttle_fun(fun,time){
        let up_time=0
        return (x,y)=>{
            if(Date.now()-up_time>=time){
                fun.bind(this, x, y)()
                up_time=Date.now()
            }
        }
    }
    add_wake(x,y){
        let iem=document.createElement('div')
        iem.style.position='absolute'
        iem.style.top=y+'px'
        iem.style.left=x+'px'
        iem.style.pointerEvents='none'
        let item_img=`
        <img src='${this.wake_img_url}' style='width:100%;hight:100%;'>
        `
        iem.innerHTML=item_img
        document.querySelector('body').appendChild(iem)
        iem.style.zIndex='16666'
        iem.style.height=this.option.item_hight+'px'
        iem.style.width=this.option.item_width+'px'
        let star_height=this.option.item_hight
        let star_width=this.option.item_width
        let tiomout=  setInterval(()=>{
        requestAnimationFrame(()=>{
            star_height-=10
            star_width-=10
            iem.style.height=star_height+'px'
            iem.style.width=star_width+'px'
            if(star_height==0&&star_width==0){
                document.querySelector('body').removeChild(iem)
            }
            //clearInterval(tiomout)
            })
            
        },100)
    }
}

使用示例

index.js


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            margin: 0px;
            padding: 0px;
            border: 0px;
        }/*这个初始化必须要做*/
    </style>
</head>
<body>
</body>
<script src="./main.js" ></script>
<script >
    const mo=new Img_Mouse('./屏幕截图 2024-04-12 214912.png','./屏幕截图 2024-04-12 214912.png',40,40)
    mo.init()
</script>
</html>

效果：