Simple and practical mouse slide over picture mask layer animation jquery Plugin

Nshover is a simple and practical mouse slide over the picture mask layer animation jquery plugin. The plugin can be used to create a mouse-over mask layer animation effect on a picture or block-level element, which can set the foreground and background color of the mask layer, and can make circular pictures, etc., very practical.

Online preview Source Download

How to use

Using the mouse to slide through the plugin requires the introduction of jquery and Ns.hover.min.js files.

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

Initializing plug-ins

After the page DOM element has been loaded, you only need to invoke the method on the element that needs to make the mouse-over effect nsHover() . You can use this method on the parent element, and all of its child elements are 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 values	Describe
Scaling	False	false/0/0.0-1.0	Setting a value of 0.0-1.0 causes the element to shrink over mouse-over, or set to 0/false to disable the zoom effect
Speed	Normal	Normal/fast/slow	Setting the mouse over is the speed of the transition animation
Rounded	Normal	None (0%)/Normal (5)/Circle (50%)/xx%/xx px	This parameter is used to control the fillet of an element, and you can set an element to be a positive circle
Bganim	Fade	Fade/scale/slide	Type of matte layer background animation
BgColor	' #ffffff '		Background color of mask layer
Bgopacity	0.5	0.0-1.0	Opacity of the mask layer background
Bgpic	Imgs/lens.png	A valid picture path	The location of the background picture of the mask layer
Bgsize	25%	0%-100%	The size of the matte layer background picture
Shadow	False	True/false	Whether to set the shadow effect
Content	‘‘	Any valid HTML content	The text content that is displayed on the matte layer

Simple and practical mouse slide over picture mask layer animation jquery Plugin