jQuery Animated Overlay Display Plugin: SlipHover

Add-ons

2026-08-03 12:47 3 次浏览 • 0 次下载 208.2KB

jQuery Animated Overlay Display Plugin: SlipHover

Plugin Description: SlipHover is a jQuery-based plugin that detects the direction of mouse movement and displays an animated overlay from the corresponding direction (or the opposite direction). It is ideal for displaying titles or descriptions in slideshows and photo galleries. SlipHover also supports customization of overlay height, animation duration, font color, background color, text alignment, and more. With the right combination of settings, it can give your slideshow or photo gallery a more polished appearance.

Usage

1. Include the Files

<script src="js/jquery.min.js"></script>
<script src="js/jquery.sliphover.min.js"></script>

2、HTML

<div id="container">
    <ul>
        <li>
            <a href="#">
                <img src="img/1.jpg" data-caption="A title or description goes here">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/2.jpg" data-caption="A title or description can go here">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/3.jpg" data-caption="HTML code can also be used">
            </a>
        </li>
        ……
    </ul>
</div>

3、JavaScript

$(function(){
    $('#container').sliphover();
});

Configuration

Properties/Methods	Type	Default Value	Description
height	String	100%	Overlay height
target	String	img	The element to which the overlay will be applied
caption	String	title	The attribute to be displayed as a title or description. You can use the custom HTML data attribute data-caption.
duration	String/Integer		Animation duration in milliseconds. Higher values result in slower animations.
fontColor	String	#fff	Font color
backgroundColor	String	rgba(0,0,0,.7)	Background color
reverse	Boolean	false	Reverse animation
textAlign	String	center	Horizontal text alignment. Options: left, center, right
verticalMiddle	Boolean	true	Vertically center the text
withLink	Boolean	true	Disable image links so they cannot be clicked