[代码样式]SlipHover – 创建一个动画遮罩层显示标题或描述

简介

SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。

兼容

jQuery 兼容

兼容 1.7 及以上版本。

浏览器兼容

IE11 及以上 ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.sliphover.min.js"></script>

2、HTML

<div id="container">
    <ul>
        <li>
            <a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
                <img src="https://www.dowebok.com/img/1.jpg" data-caption="这是一个标题或描述">
            </a>
        </li>
        <li>
            <a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
                <img src="https://www.dowebok.com/img/2.jpg" data-caption="这里可以放标题或描述">
            </a>
        </li>
        <li>
            <a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">
                <img src="https://www.dowebok.com/img/3.jpg" data-caption="还可以是 HTML 代码">
            </a>
        </li>
        ……
    </ul>
</div>

3、JavaScript

$(function(){
    $('#container').sliphover();
});

配置

GitHub 地址：https://github.com/wayou/SlipHover

百度网盘" name="SlipHover – 创建一个动画遮罩层显示标题或描述" pass="" code=""]