nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果，它可以设置遮罩层的前景色和背景色，可以制作圆形图片等，非常实用。
在线预览 源码下载
使用方法使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件。
1
2
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/ns.hover.min.js"></script>
初始化插件在页面DOM元素加载完毕之后，只需要需要制作鼠标滑过效果的元素上调用nsHover()方法即可。你可以在父元素上使用该方法，那么它的所有子元素都会被初始化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(container_class_or_id).nsHover({
scaling :false,
speed:'normal',
rounded:'normal',
bgcolor:'#ffffff',
bgopacity : 0.5,
bgpic :'imgs/lens.png',
bgsize :'50%',
bganim :'fade',
shadow :false,
content:''
});
</script>
配置参数参数
默认值
可用值
描述
scaling
false
false / 0 / 0.0 - 1.0
设置0.0 - 1.0的值使元素在鼠标滑过时收缩，或设置为0 / false来禁用缩放效果
speed
normal
normal / fast / slow
设置鼠标滑过是过渡动画的速度
rounded
normal
none(0%) / normal(5%) / circle(50%) / xx% / xx px
该参数用于控制元素的圆角，你可以将一个元素设置为正圆形
bganim
fade
fade / scale / slide
遮罩层背景动画的类型
bgcolor
'#ffffff'
遮罩层的背景颜色
bgopacity
0.5
0.0-1.0
遮罩层背景的透明度
bgpic
imgs/lens.png
有效的图片路径
遮罩层背景图片的位置
bgsize
25%
0% - 100%
遮罩层背景图片的大小
shadow
false
true / false
是否设置阴影效果
content
''
任何有效的html内容
遮罩层上显示的文字内容