简介
SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。
兼容
兼容 IE9+ 及以上版本。
使用方法
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="http://www.dowebok.com/" target="_blank">
<img src="img/1.jpg" data-caption="这是一个标题或描述">
</a>
</li>
<li>
<a href="http://www.dowebok.com/" target="_blank">
<img src="img/2.jpg" data-caption="这里可以放标题或描述">
</a>
</li>
<li>
<a href="http://www.dowebok.com/" target="_blank">
<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-captionduration字符串/整数 动画持续时间，以毫秒为单位，越大越慢fontColor字符串#fff字体颜色backgroundColor字符串rgba(0,0,0,.7)背景颜色reverse布尔值false反向动画textAlign字符串center文字水平位置，可选 left、center、rightverticalMiddle布尔值true文字垂直居中withLink布尔值true禁用图片链接，使其不可点
演 示 下 载
GitHub地址：http://www.oschina.net/p/sliphover
文档：
http://wayou.github.io/SlipHover/
转载请注明原文地址: https://ju.6miu.com/read-1125737.html
