Simple and practical jQuery plug-in for animation with the mouse sliding over the Image Mask Layer to mask jquery

Simple and practical jQuery plug-in for animation with the mouse sliding over the Image Mask Layer to mask jquery

NsHover is a simple and practical jQuery plug-in that slides the mouse over the Image Mask Layer. This plug-in can be used to create animation effects of the mouse over an image or block-level element. It can be used to set the foreground color and background color of the mask layer, as well as to create a circular image.

Download Online Preview source code

Usage

The jQuery and ns. hover. min. js files need to be introduced when you move the mouse over the plug-in.

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

Initialize the plug-in

After the DOM elements on the page are loaded, you only need to callnsHover()Method. You can use this method on the parent element, so all its child elements will be initialized.

1234567891011121314

<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>

Configuration parameters

Parameters	Default Value	Available Value	Description
Scaling	False	False/0/0/0.0-1.0	Set the value 0.0-1.0 to make the element shrink when the mouse slides, or set it to 0/false to disable the zoom effect.
Speed	Normal	Normal/fast/slow	Set the speed at which the mouse slides over a transitional animation.
Rounded	Normal	None (0%)/normal (5%)/circle (50%)/xx %/xx px	This parameter is used to control the rounded corner of an element. You can set an element as a circle.
Bganim	Fade	Fade/scale/slide	Type of background animation at the Mask Layer
Bgcolor	'# Ffff'		Background Color of the Mask Layer
Bgopacity	0.5	0.0-1.0	Transparency of the background at the Mask Layer
Bgpic	Imgs/lens.png	Valid image path	Position of the background image on the Mask Layer
Bgsize	25%	0%-100%	Size of the background image of the Mask Layer
Shadow	False	True/false	Set shadow effect?
Content	''	Any valid html content	Text displayed on the Mask Layer