📌  相关文章
📜  单击后,underlive 将出现在锚标记下 (1)

📅  最后修改于: 2023-12-03 15:07:20.657000             🧑  作者: Mango

单击后，Underlive将出现在锚标记下
简介

本程序为一个Javascript库，旨在实现通过单击锚标记，将Underlive（一个弹出式辅助窗口）置于锚标记下方，对用户提供更多信息。

用法

  1. 在HTML文件中引用该库：<script src="underlive.js"></script>

  2. 为需要添加Underlive的锚标记添加一个data-underlive属性。该属性设为锚标记下要展示的内容的选择器，如：

    <a href="#" data-underlive="#underlive-content">点击查看详情</a>
<div id="underlive-content" style="display:none;">
    Underlive 初识：...
</div>

    在这个例子中，当用户单击了锚标记，#underlive-content的内容就会出现在新建的Underlive窗口下。

  3. 在JavaScript文件中加入以下代码，用于动态创建Underlive窗口：

    var underlive = new Underlive({
    width: 300,    // Underlive宽度
    height: 200,   // Underlive高度
    showDuration: 200,  // 显示动画时长，单位毫秒
    hideDuration: 200,  // 隐藏动画时长，单位毫秒
    container: "body"   // Underlive容器，此参数为必填
});

    这里我们可以设定Underlive的宽度和高度，以及展示和隐藏动画的时长。此外，您还需要指定Underlive容器的选择器，此处我们选择<body>作为容器。

Markdown代码
## 单击后，Underlive将出现在锚标记下

### 简介
本程序为一个Javascript库，旨在实现通过单击锚标记，将Underlive（一个弹出式辅助窗口）置于锚标记下方，对用户提供更多信息。

### 用法
1. 在HTML文件中引用该库：`<script src="underlive.js"></script>`

2. 为需要添加Underlive的锚标记添加一个`data-underlive`属性。该属性设为锚标记下要展示的内容的选择器，如：

   ```html
   <a href="#" data-underlive="#underlive-content">点击查看详情</a>
   <div id="underlive-content" style="display:none;">
       Underlive 初识：...
   </div>

在这个例子中，当用户单击了锚标记，#underlive-content的内容就会出现在新建的Underlive窗口下。

  1. 在JavaScript文件中加入以下代码，用于动态创建Underlive窗口：

    var underlive = new Underlive({
    width: 300,    // Underlive宽度
    height: 200,   // Underlive高度
    showDuration: 200,  // 显示动画时长，单位毫秒
    hideDuration: 200,  // 隐藏动画时长，单位毫秒
    container: "body"   // Underlive容器，此参数为必填
});

    这里我们可以设定Underlive的宽度和高度，以及展示和隐藏动画的时长。此外，您还需要指定Underlive容器的选择器，此处我们选择<body>作为容器。