插件 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 +。