最新资源
简介
一个jQuery插件，用于创建标记动画，当指定文本在视口中可见时，标记动画会逐渐高亮显示。
根据GPL-3.0许可。
参见：
- 纯JavaScript的渐进式文本高亮效果
- JavaScript中的10个最佳文本突出显示插件
如何使用它:
1.安装并下载jQuery Marker动画插件。
# NPM $ npm install jquery.marker-animation --save
2.将jQuery Marker Animation插件导入到文档中。
<!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- From Dist Folder --> <script src="/path/to/build/index.js"></script> <!-- Or From CDN --> <script src="https://cdn.jsdelivr.net/npm/jquery.marker-animation/build/index.min.js"></script>
3.调用函数标记动画在要高亮显示的目标文本上。就是这样。
<p> Vestibulum augue lectus, aliquam tincidunt accumsan a, <span class="marker-animation">iaculis nec tellus. Quisque non interdum turpis</span>. Nunc interdum, nibh non laoreet egestas, urna odio lobortis ex, sit amet dignissim nunc nulla at lectus. Morbi a maximus erat. Fusce fermentum ornare faucibus. In lorem lectus, rhoncus vel arcu id, aliquam dignissim nibh. Nulla vestibulum, metus quis finibus tincidunt, metus purus congue odio, quis pretium orci lectus eget massa. Vivamus eu nibh risus. Proin aliquet maximus hendrerit. Donec tristique ex velit, non consequat ligula feugiat nec. Aenean lacinia sit amet augue vitae vehicula. Ut quis mauris varius, molestie eros convallis, vulputate leo. Nam enim augue, maximus id ante ut, rutrum gravida orci. Duis tincidunt pretium venenatis. </p>
$(function(){
$('.marker-animation').markerAnimation();
});
4.自定义高亮显示文本的外观。
$('.marker-animation').markerAnimation({
// background color
"color": '#fe9',
// position
'padding_bottom': '.1em',
// thickness
"thickness": '.6em',
// font weight
"font_weight": 'bold',
// enabled stripes
'stripe': false,
'stripe_thickness': 2,
// RTL
'rtl': false
});
5.自定义标记动画。
$('.marker-animation').markerAnimation({
// delay
"delay": '.1s',
// duration
"duration": '2s',
// easing function
"function": 'ease',
// whether to repeat the animation
"repeat": false,
cssFilter: function( css ) {
return css;
},
});
6.您也可以通过数据模型选项名称属性，以防页面上有多个实例。
<span class="marker-animation" data-ma_repeat="true">iaculis nec tellus. Quisque non interdum turpis</span>
更新日志：
v1.5.21 (2022-11-08)
- 家务：更新npm依赖项
v1.5.18 (2022-01-30)
- 家务：更新npm依赖项
v1.5.17 (2022-01-25)
- 家务：更新npm依赖项
v1.5.16 (2022-01-02)
- 家务：更新npm依赖项
v1.5.15 (2021-12-21)
- 家务：更新npm依赖项
v1.5.14 (2021-09-28)
- 家务：更新npm依赖项
v1.5.13 (2021-09-06)
- 家务：更新npm依赖项
v1.5.12 (2021-08-29)
- 使现代化
v1.5.11 (2021-08-07)
- 使现代化
v1.5.10 (2021-06-23)
- 使现代化
v1.5.9 (2021-04-17)
- 使现代化
v1.5.8 (2021-02-26)
- 使现代化
v1.5.6 (2021-01-20)
- 使现代化
v1.5.5 (2021-01-06)
- 使现代化
v1.5.4 (2020-12-14)
- 使现代化
v1.5.3 (2020-12-08)
- 家务：同步工作流
v1.5.2 (2020-11-23)
- 更新的程序包
v1.5.0 (2020-10-14)
- 支持RTL
v1.4.30 (2020-09-25)
- 使现代化
v1.4.29 (2020-09-11)
- 使现代化
v1.4.28 (2020-08-18)
- 使现代化
v1.4.25 (2020-07-12)
- 家务：同步工作流
v1.4.24 (2020-06-28)
- 调整
v1.4.23 (2020-06-25)
- 调整
v1.4.16 (2020-02-12)
- 调整
v1.4.13 (2020-01-23)
- 已更新
v1.4.7 (2019-10-18)
- 调整
v1.4.6 (2019-10-06)
- 使现代化
v1.3.18（2019年9月13日）
- 使现代化
v1.3.17 (2019-07-25)
- 使现代化
v1.3.9 (2019-06-26)
- 使现代化
v1.3.8 (2019-06-25)
- 重构：分割文件
v1.3.6 (2019-06-18)
- 重构：分割文件
v1.3.5 (2019-05-28)
- 添加条纹支撑
v1.3.4 (2019-05-08)
- 添加条纹支撑
v1.3.3 (2019-05-03)
- 使现代化
v1.3.2 (2019-02-11)
- 添加的模板
- 错误修复
2018-12-07
- 删除：position_bottom选项
2018-12-06
- v1.2.1:错误修复
2018-12-03
- v1.12:错误修复
2018-12-01
- 错误修复
预览截图
逐步高亮显示文章中 文本 jQuery标记动画