jQuery动画遮罩层显示插件SlipHover

所属分类:UI,媒体-悬停,图片展示

 4167  47  查看评论 (4)
jQuery动画遮罩层显示插件SlipHover ie兼容11

使用方法

1、引入文件

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

2、HTML

<div id="container">
    <ul>
        <li>
            <a href="#">
                <img src="img/1.jpg" data-caption="这是一个标题或描述">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/2.jpg" data-caption="这里可以放标题或描述">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/3.jpg" data-caption="还可以是 HTML 代码">
            </a>
        </li>
        ……
    </ul>
</div>

3、JavaScript

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

配置

属性/方法类型默认值说明
height字符串100%遮罩的高度
target字符串img将要被遮罩的元素
caption字符串title将要被显示成标题或描述的属性,可以使用 HTML data 自定义属性 data-caption
duration字符串/整数
动画持续时间,以毫秒为单位,越大越慢
fontColor字符串#fff字体颜色
backgroundColor字符串rgba(0,0,0,.7)背景颜色
reverse布尔值false反向动画
textAlign字符串center文字水平位置,可选 left、center、right
verticalMiddle布尔值true文字垂直居中
withLink布尔值true禁用图片链接,使其不可点
相关插件-悬停,图片展示

鼠标hover效果(原创)

30种鼠标触碰按钮添加背景样式的效果~
  悬停
 6492  191

jQuery鼠标悬停方向感知

jQuery鼠标悬停方向感知,穿墙效果
  悬停
 1942  24

3D鼠标滑动效果

hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件
  悬停
 8181  112

数十次css3鼠标悬停特效

鼠标移上去,界面显示的多种方式,各种css3动画
  悬停
 10616  370

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    心镜小主人 0
    2017/9/15 10:54:52
    马成 0
    2017/9/15 10:52:16

    厉害了  抱拳了

    回复
    小郭 0
    2017/9/9 16:22:37

    太实用了  值得学习,真心感谢大腿!

    回复
    d. 0
    2017/8/11 17:12:09

    谢谢大佬,找了很久,这个还免费,很良心,谢谢

    回复
取消回复