SlipHover – 动画遮罩层跟随鼠标移动

   简介

SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。

   兼容

兼容 IE9+ 及以上版本。

使用方法

1、引入文件

2、HTML

    

        

            
                
            
        
        

            
                
            
        
        

            
                
            
        
        ……
    

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	禁用图片链接，使其不可点

演 示 下 载

GitHub地址：http://www.oschina.net/p/sliphover

文档： http://wayou.github.io/SlipHover/