jQuery动画遮罩层显示插件SlipHover

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

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

JQuery 鼠标悬停放射出炫幻效果

JQuery 鼠标悬停放射出炫幻效果 CSS 里面还带字体哦
  悬停
 9057  88

鼠标滑过特效

模块变暗,出现遮罩层,12种炫酷的CSS3鼠标滑过图片遮罩层动画特效.
  悬停
 12652  161

各种鼠标移入效果

各种鼠标移入效果
  悬停
 13195  222

纯css3鼠标悬停hover按钮动画事件插件

css3 transition属性制作多种按钮悬停动画特效,css3悬停按钮、CSS3过渡效果、CSS3点击按钮过渡效果
  悬停
 5414  166

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

    1024 0
    2017/12/9 2:44:52
    心镜小主人 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

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

    回复
取消回复