DIVMonster资料

本文主要介绍DIVMonster资料 方法和在新技术下所面对的“挑战”,方便大家深入理解DIVMonster资料 过程。本文也将分享DIVMonster资料 所遇到的问题和应对策略,怎么解决怎么做的问题。
通过深入本文可以理解代码原理,进行代码文档的下载,也可以查看相应 Demo 部署效果。

前置

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,可以传入一些元素列表或者使用默认的列表。

DIVMonster资料部分资料来自网络,侵权毕设源码联系删除

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » DIVMonster资料

提供最优质的资源集合

立即查看 了解详情