插件 jQuery.SlipHover 中文 API 文档

🌙
手机阅读
本文目录结构

插件 jQuery.SlipHover 中文 API 文档 https://github.com/Wayou/SlipHover

SlipHover 将方向感知悬停动画应用于图像的标题。

快速开始

包括文件

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

根据您的意愿调用容器上的插件

$("#container").sliphover();

全部完成!

选项

您可以通过在调用插件时传递选项来自定义标题,下面列出了所有可用选项。

在你希望的容器上调用插件

$("#container").sliphover({
    option: value,
    option2: value2,
    ...
});

选项 | 类型 | 默认 | 描述 | 例 —|—-|—-|—-|– 例 高度 | 串 | 100% | 叠加层的高度。例如 200px,50% | 视图 目标 | 串 | ‘img’ | 指定叠加将适用的巫婆元素。任何有效的 CSS 选择器都可以。 | 视图 字幕 | 串 | ’title’ | 巫婆属性将是叠加的内容。您可以使用自定义 HTML5 数据属性。例如 data-caption | 视图 持续时间 | 数 / 串 | ‘fast’ | 动画将以毫秒为单位,fast 等于 200 和 slow 等于多长时间 600。你可以给你自己的号码。例如 500 | 视图 字体颜色 | 串 | ‘#fff’ | 叠加层中文本的颜色 | 视图 背景颜色 | 串 | ‘rgba(0,0,0,.5)’ | 叠加层的背景颜色。任何有效的 CSS 颜色值都可以 | 视图 backgroundColorAttr | 串 | ‘data-background’ | 您还可以通过此 data-background 属性为每个叠加指定单独的颜色 data-background=“rgba(120,100,240,0.85)” | 视图 相反 | 布尔 | 假 | 动画方向是否反转 | 视图 textAlign 设置 | 串 | ‘center’ | 标题的地平线对齐 | 视图 verticalMiddle | 布尔 | 真正 | 标题的垂直对齐 | 视图 withLink | 布尔 | 真正 | 如果图像被链接包裹,则叠加层将是可点击的,设置为假以禁用点击 | 视图

兼容性

  • 请求 jQuery 1.7+
  • 适用于所有现代浏览器和 IE9 +。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了