資料
annotation 這個對象
isShowing() 判斷目前顯示還是隱藏 Boolean
show() 顯示,展示動畫
hide() 隱藏,這不是動畫
remove() 刪除跟dom的聯繫
確定的東西不能被修改
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline', color: 'red' });
annotation.show();
annotation.color = 'green';// 顏色不能被修改
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.aaa {
line-height: 40px;
}
</style>
<body>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
<em>Phasellus畫橫線</em> purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat
molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
<strong>Phasellus框起來</strong> purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl,
placerat molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
massa vulputate. <span>Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.圈起來</span>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
<span id="block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat
molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.塗上顏色
</span>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat
molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
<b id="b">ullamcorper feugiat畫叉叉</b>
massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex,
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in <b id="a">portasdsddssd刪除線</b>.
<br>
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urn <b id="c"> massa vulputate. Maecenas euismod vol包起來</b>
</p>
</main>
<script type="module">
import {annotate,annotationGroup} from 'https://unpkg.com/rough-notation?module'
// 下劃線
const e = document.querySelector('em');
const annotation = annotate(e, {type: 'underline', color: 'blue'});
// annotation.show();
// 方框框起來
const e1 = document.querySelector('strong');
const annotation1 = annotate(e1, {type: 'box', color: 'red', padding: 10});
// annotation1.show();
// 圈起來
const e2 = document.querySelector('span');
const annotation2 = annotate(e2, {type: 'circle', color: 'orange', padding: 10});
// annotation2.show();
// 塗上
const e3 = document.querySelector('#block');
const annotation3 = annotate(e3, {type: 'highlight', color: 'yellow',animationDuration: 1500, multiline: true,});
// multiline 多行展示,發現一個問題就是,首先他不是在首行展示的,纔有效
// annotation3.show();
// 刪除線
const e4 = document.querySelector('#a');
const annotation4 = annotate(e4, {type: 'strike-through', color: 'rgb(27, 94, 32)'});
// annotation4.show();
// 畫叉叉
const e5 = document.querySelector('#b');
const annotation5 = annotate(e5, {type: 'crossed-off', color: 'rgb(94,39,30)',animationDuration:2000,iterations:6});
// animationDuration 持續時間,默認800ms
// iterations 迭代的次數,默認2,也就是說默認畫兩下
// annotation5.show();
// 畫中括號
const e6 = document.querySelector('#c');
const annotation6 = annotate(e6, {type: 'bracket', color: 'rgb(94,39,30)',padding:[2,10],brackets: ['right','left'], strokeWidth: 3});
// animate 類型Boolean,默認true,用途動畫的開啓關閉
// strokeWidth 線的寬度默認1
// padding 默認5 就是top, left ,right,bottom 都是5
// * 如果是中括號 [top,right,bottom,left]或者 [top & bottom, right & left]
// annotation6.show();
// brackets 中括號的回執
// 是取值 string/[]
// 單個值 left,right,top,bottom
//多個值 ['left','right'] 就是先畫做括號,再畫右括號
//放在一個數組中一起添加添加
const ag = annotationGroup([annotation, annotation2, annotation3, annotation4, annotation5, annotation6]);
ag.show();
// 這個比較有條理性
//區別就是會從左到右依次開始動畫加載
</script>
</body>
</html>