Ninety Percent Muffin

    @ikangxu/vuepress-plugin-mouse-effects

    0.0.3 • Public • Published

    鼠标移动特效

    此插件为Vuepress插件,为了更快捷的搭建一个博客进行演示,此处推荐使用主题vuepress-theme-reco

    以下是对该主题的介绍(摘抄自官网)

    Introduce

    1. 这是一个vuepress主题,旨在添加博客所需的分类、TAB墙、分页、评论等功能;
    2. 主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用;
    3. 效果:午后南杂
    4. 文档:vuepress-theme-reco-doc

    主题效果演示

    Home

    以下是次插件的效果演示

    particle

    插件效果演示

    click-word

    插件效果演示

    插件调用方式

    暂时只支持本地调用
    将此插件下载到本地
    使用npm link进行项目关联

    然后再vuepress-theme-reco主题的index.js中进行如下配置即可使用

    [require('@ikangxu/vuepress-plugin-mouse-effects'), {
      type: 'click-word', // 暂时只内置了一个特效   内置的特效有 particle|click-word
      words: ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"], // click-word效果需要用到的文字提示
      style: {
        cursor: 'Altr_Vnd', // 支持自定义cursor,没有则为默认样式
        borderRadius: '50%', // 形状 particle效果需要用到
        zIndex: 2,
        colors: ["#FF0000", "#FF7D00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF"], // 颜色
        fontSize: 14, // click-word效果需要用到的文字显示大小
        r: {
          min: 5, // 半径最小值
          max: 15 // 半径最大值
        },
        dx: {
          min: -10, // 横向偏移量最小值
          max: 10 // 横向偏移量最大值
        },
        dy: {
          min: -10, // 纵向偏移量最小值
          max: 10  // 纵向偏移量最大值
        }
      }
    }]
    npm i @ikangxu/vuepress-plugin-mouse-effects -D
    ['@ikangxu/vuepress-plugin-mouse-effects', {
      type: 'click-word', // 暂时只内置了一个特效   内置的特效有 particle|click-word
      words: ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"], // click-word效果需要用到的文字提示
      style: {
        cursor: 'Altr_Vnd', // 支持自定义cursor,没有则为默认样式
        borderRadius: '50%', // 形状 particle效果需要用到
        zIndex: 2,
        colors: ["#FF0000", "#FF7D00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF"], // 颜色
        fontSize: 14, // click-word效果需要用到的文字显示大小
        r: {
          min: 5, // 半径最小值
          max: 15 // 半径最大值
        },
        dx: {
          min: -10, // 横向偏移量最小值
          max: 10 // 横向偏移量最大值
        },
        dy: {
          min: -10, // 纵向偏移量最小值
          max: 10  // 纵向偏移量最大值
        }
      }
    }]

    该插件是全局的,无需新增多余代码

    Install

    npm i @ikangxu/vuepress-plugin-mouse-effects

    DownloadsWeekly Downloads

    2

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    755 kB

    Total Files

    13

    Last publish

    Collaborators

    • kangxu