mouser 鼠标特效库

介绍

一款基于canvas和svg的鼠标特效库，简单几行代码就可实现华丽的鼠标特效

菜单（改变drawType）

1. 躁动线条
2. 绚丽流星
3. 大数据专用
4. 街头涂鸦
5. 连线点阵
6. 萤火之光
7. 多彩烟花
8. 放大镜

火候及调料

字段	默认值	说明
drawType	1	特效选择 1 跳动的彩色线条 2 金闪闪 3 大数据专用 4 街头涂鸦 5 连线点阵 6 萤火之光 7 多彩烟花 8 放大镜
leaveAutoer	true	鼠标移出后自动绘制(drawType为1时生效)
showTime	20	绘制的线条显示的时间(drawType为1时生效)
maxWidth	20	最大宽度(drawType为1时生效)
minWidth	5	最小宽度(drawType为1时生效)
color	2默认值#F8EC85 5默认值#A5FBFF	星星的颜色(drawType为2和5时生效)
dotColor	#9CD9F9	点的颜色(drawType为3时生效)
lineColor	#9CD9F9	线的颜色(drawType为3时生效)
number	8000	点的数量(drawType为5时生效)
colors	['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']	礼花颜色(drawType为7时生效)
multi	1.5	放大倍率(drawType为8时生效)
border	null	放大镜镜框(drawType为8时生效)

下载地址

gitee:  mouser: 鼠标特效库，简单几行代码就可实现华丽的鼠标拖尾特效

GitHub - liqingyi123/mouser: 鼠标特效库，简单几行代码就可实现华丽的鼠标拖尾特效

烹调方式

<script src="js/mouser-lqy.min.js" type="text/javascript" charset="utf-8"></script>
// 或者
import 'js/mouser-lqy.min.js';

let mouserModel = 1, mouser;
const mouseModels = {
    1: {
        title: '彩色线条',
        options: {
            leaveAutoer: false,
            showTime: 20,
            maxWidth: 12,
            minWidth: 4,
        }
    },
    2: {
        title: '金闪闪',
        options: {
            color: '#F8EC85',
        }
    },
    3: {
        title: '大数据',
        options: {
            dotColor: '#F22323',
            lineColor: '#F2EC23'
        }
    },
    4: {
        title: '街头涂鸦',
        options: {}
    },
    5: {
        title: '连线点阵',
        options: {
            color: '#FFF300',
            number: 10000
        }
    },
    6: {
        title: '萤火之光',
        options: {}
    },
    7: {
        title: '多彩烟花',
        options: {
            colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
        }
    },
    8: {
        title: '放大镜',
        options: {
            multi: 1.5,
            border: {
                width: 10,
                color: '#069'
            }
        }
    }
}
mouser = new Mouser({
    ...{
        drawType: mouserModel
    },
    ...mouseModels[mouserModel].options
});
function changeMouser(type) {
    mouserModel = type;
    document.title = `Canvas绘制鼠标${mouseModels[mouserModel].title}特效`;
    mouser.changeModel({
        ...{
            drawType: mouserModel
        },
        ...mouseModels[mouserModel].options
    });
}