jQuery动画遮罩层显示插件SlipHover

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

 5293  65  查看评论 (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禁用图片链接,使其不可点
相关插件-悬停,图片展示

CSS3按钮炫酷动画hover样式

CSS3按钮动画新版,修正远按钮图标字体看不见
  悬停
 2414  51

c的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。
  悬停
 9277  64

图片获取焦点时动态显示(隐藏)文字

图片获取焦点时动态显示文字,失去焦点后动态隐藏
  悬停
 4085  56

9种纯CSS3人物信息卡片UI设计效果

每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效。
  悬停
 15533  273

讨论这个项目(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

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

    回复
取消回复