简单实用的鼠标滑过图片遮罩层动画jQuery插件-爱编程

简单实用的鼠标滑过图片遮罩层动画jQuery插件

阅读：48 时间：2018-02-03 03:17

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果，它可以设置遮罩层的前景色和背景色，可以制作圆形图片等，非常实用。

使用方法

使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/ns.hover.min.js"></script>

初始化插件

在页面DOM元素加载完毕之后，只需要需要制作鼠标滑过效果的元素上调用nsHover()方法即可。你可以在父元素上使用该方法，那么它的所有子元素都会被初始化。

<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内容	遮罩层上显示的文字内容

在线预览源码下载