Purplecoat.js是一个轻量级（缩小了约1kb）的jQuery插件，用于在任何DOM元素上创建动画标记的覆盖，可以通过点击或悬停触发。它与jQuery的fade（）函数配合使用，提供流畅的体验。

如何使用它:

1.首先在文档中加载jQuery Purplecoat.js插件的缩小版。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/purplecoat.min.js"></script>

2.向目标DOM元素添加一个唯一的ID，并在数据紫外涂层标签属性：

<img data-purplecoat="example"
     data-purplecoat-label="jQueryScript"
     src="https://www.jqueryscript.net/dummy/1.jpg" />

3.创建一个触发器元素来切换标记的覆盖。

<button data-purplecoat-toggle="example">
  Click Me
</button>

4.就是这样。您也可以通过JavaScript触发标记的覆盖，如下所示：

$("[data-purplecoat=example]").on("mouseover", function() {
  $("[data-purplecoat=example]").purplecoat();
});

5.覆盖覆盖的默认CSS样式：

.purplecoat { 
  display: none; 
  position: absolute; 
  padding: 5px; 
  box-sizing: border-box; 
  background-color: rgba(142, 68, 173, 0.9); 
  color: #FFF; 
  text-align: center; 
  font-weight: bold; 
  overflow: hidden; 
  z-index: 9999; 
} 

.purplecoat-inner { 
  display: table; 
  width: 100%; 
  height: 100%; 
} 

.purplecoat-inner-text { 
  display: table-cell; 
  vertical-align: middle;
}

预览截图

在DOM元素上创建带标签 套印格式 jQuery Purplecoat.js