阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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