簡單實用的鼠標滑過圖片遮罩層動畫jQuery插件

2024-04-27 15:01:48

字體：大中小

供稿：網(wǎng)友

nsHover是一款簡單實用的鼠標滑過圖片遮罩層動畫jQuery插件。該插件可以在圖片或塊級元素上制作鼠標滑過時的遮罩層動畫效果，它可以設(shè)置遮罩層的前景色和背景色，可以制作圓形圖片等，非常實用。

在線預(yù)覽源碼下載

使用方法

使用該鼠標滑過插件需要引入jQuery和ns.hover.min.js文件。

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

初始化插件

在頁面DOM元素加載完畢之后，只需要需要制作鼠標滑過效果的元素上調(diào)用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>      

配置參數(shù)

參數(shù)	默認值	可用值	描述
scaling	false	false / 0 / 0.0 - 1.0	設(shè)置0.0 - 1.0的值使元素在鼠標滑過時收縮，或設(shè)置為0 / false來禁用縮放效果
speed	normal	normal / fast / slow	設(shè)置鼠標滑過是過渡動畫的速度
rounded	normal	none(0%) / normal(5%) / circle(50%) / xx% / xx px	該參數(shù)用于控制元素的圓角，你可以將一個元素設(shè)置為正圓形
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	是否設(shè)置陰影效果
content	''	任何有效的html內(nèi)容	遮罩層上顯示的文字內(nèi)容