zoukankan      html  css  js  c++  java
  • 给你的网站添加炫酷的动画注释

    前置

    rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中,比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中,比如你可以看见头部导航条中的博客昵称有一个下划线。下面是它可以实现的基本效果,点击按钮试一试吧。

    使用

    npm install --save rough-notation
    

    通过将元素传递到 annotation 来创建对象,以及通过配置来描述样式。拥有 annotation 对象后,可以调用annotation.show()显示。

    import { annotate } from 'rough-notation';
    
    const e = document.querySelector('#myElement');
    const annotation = annotate(e, { type: 'underline' });
    annotation.show();
    

    通过 Group 创建多个动画注释:

    import { annotate, annotationGroup } from 'rough-notation';
    
    const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
    const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
    const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });
    
    const ag = annotationGroup([a3, a1, a2]);
    ag.show();
    

    参数

    创建 annotation 时,将传递一个配置。配置只有一个必填字段,即注释的字段。但是,您可以通过多种方式配置。type

    类型

    这是一个必填字段,设置注释样式。

    • underline:此样式在元素下方创建粗略下划线。
    • box:此样式在元素周围绘制一个框。
    • corcle:此样式在元素周围绘制一个圆圈。
    • highlight:此样式创建高光效果,就像用荧光笔标记一样。
    • strike-through:此样式通过元素绘制水平线。
    • crossed-off:此样式在元素上绘制一个"X"。
    • bracket:此样式围绕元素(通常是文本段落)绘制一个括号。默认情况下,在右侧,但可以配置为任何或全部的左,右,上,下。

    animate

    在注释时打开/关闭动画的布尔属性。默认值为 true

    animationDuration

    动画的持续时间(以毫秒为单位)默认值为 800ms

    color

    表示注释草图颜色的字符串值,默认值为 currentColor

    strokeWidth

    注释描边宽度。默认值为 1。

    padding

    在元素和绘制注释的大致地点之间填充。可以将值设置为类似于 CSS 样式填充或只是数组。5 top left right bottom``[top, right, bottom, left] [top & bottom, left & right]

    multiline

    仅适用于内联文本。若要注释多行文本,请将此属性设置为 true

    iterations

    配置迭代次数。默认情况下,注释在两次迭代中绘制,例如,下划线时,从左到右绘制,然后从右到左绘制。

    brackets

    配置元素的哪一侧为支架。值可以是字符串或字符串数组,每个字符串都是这些值之一:top left right bottom。绘制支架时,默认值为 right

    它还提供一些事件,供您灵活调用,这里不展开描述,可以去 Github 看一看。

    我的使用

    notation/index.js

    import { annotate, annotationGroup } from 'rough-notation'
    import { pageName as currentPage } from '@tools'
    import './index.scss'
    
    const pageName = currentPage()
    const group = []
    
    const annotateList = [
        {
            page: 'all',
            selector: '#Header1_HeaderTitle',
            config: {
                type: 'underline',
                color: '#2196F3',
            },
        },
        {
            page: 'post',
            selector: '#cb_post_title_url',
            config: {
                type: 'highlight',
                color: '#FFF176',
            },
        },
        {
            page: 'post',
            selector: 'mark',
            config: {
                type: 'highlight',
                color: '#FFD54F',
            },
        },
        {
            page: 'post',
            selector: 's',
            config: {
                type: 'strike-through',
                color: '#FF0000',
            },
        },
        {
            page: 'post',
            selector: 'u',
            config: {
                type: 'underline',
                color: '#2196F3',
            },
        },
        {
            page: 'post',
            selector: 'strong',
            config: {
                type: 'circle',
                color: '#F44336',
            },
        },
    ]
    
    const buildGroup = items => {
        for (let { selector, page, config } of items) {
            if (page === 'all' || pageName === page) {
                const element = document.querySelectorAll(selector)
                if (!element.length) return
                if (element.length === 1)
                    group.push(annotate(document.querySelector(selector), config))
                if (element.length > 1) {
                    element.forEach(function(item) {
                        group.push(annotate(item, config))
                    })
                }
            }
        }
    }
    
    const notation = (customList = annotateList) => {
        buildGroup(customList)
        const ag = annotationGroup(group)
        setTimeout(() => {
            ag.show()
        }, 1000)
    }
    
    export default notation
    

    在创建的博客园皮肤使用时,只需要 import notation,可以传入一些元素列表或者使用默认的列表。

  • 相关阅读:
    每日一水 POJ8道水题
    编译和使用 MySQL C++ Connector
    j2ee model1模型完成分页逻辑的实现 详解!
    DB查询分析器访问EXCEL时,要在表名前后加上中括弧或双引号
    指向结构体变量的指针
    EOSS V3.0 企业运营支撑系统(基于RBAC原理的权限管理)
    MybatisGen1.0 Mybatis JavaBean Mapper生成工具
    The table name must be enclosed in double quotation marks or sqare bracket while accessing EXCEL by
    资源-Android:Android
    软件-开发软件:Android Studio
  • 原文地址:https://www.cnblogs.com/guangzan/p/13377542.html
Copyright © 2011-2022 走看看