sliphover演示9种不同的图片动画遮罩效果_图片代码_图片插件_hover_遮罩层

SlipHover 是一个能判断鼠标移动方向，并以动画的方式显示带有标题和描述的遮罩层。

淘建站为您提供更多_图片代码_图片插件_hover_遮罩层，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 402 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：图片代码 > 图片插件难易程度：初级

HTML

首先我们在页面放置多个图片，并且在img标签上加上标题

<ul>
    <li>
        <a href="http://www.sucaiq.com/" target="_blank">
            <img src="img/1.jpg" title="这是一个标题或描述">
        </a>
    </li>
    <li>
        <a href="http://www.sucaiq.com/" target="_blank">
            <img src="img/3.jpg" title="还可以是 HTML 代码">
        </a>
    </li>
.......
</ul>

引入jQuery库和sliphover插件

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

jQuery

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

SlipHover演示

1、默认 2、遮罩高度 3、HTML data属性 4、动画时间 5、字体颜色 6、背景颜色 7、反向 8、文字排版 9、禁用链接

SlipHover相关API

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