带方向感知的鼠标滑过图片边框特效jQuery插件

jquery.focus-follow.js是一款带方向感知的鼠标滑过图片边框特效jQuery插件。在鼠标滑过图片的时候，插件会感知鼠标的位置，将相应大小的图片边框从不同位置进入，图片边框会根据图片大小而变化，还可以有圆角效果。

JavaScript 动画效果

访问GitHub主页

共4Star

详细介绍

jquery.focus-follow

A responsive indicator that follows your focus, while hovering over your elements (for example your image gallery). The elements can have different dimensions and have a different border-radius. Everything gets recalculated on the fly, so you can use it within your responsive websites.

Dependencies

In order to use jquery.focus-follow you have to include the jQuery library.

Installation

Include the script after jQuery:

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.focus-follow.js"></script>

Usage

followFocus method

Select your elements that should take advantage of the focus-follow feature and call the followFocus() method

$("img").followFocus();

Options

option	type	default	description
color	string	"orange"	color of the focus indicator.
opacity	float	1.0	opacity of the focus indicator (range: 0.0 - 1.0).
speed	int	400	duration in milliseconds that takes until the focus indicator moves from the last hovered element to the new one.
margin	int	2	margin of the focus indicator
margin_horizontal	int	2	horizontal margin of the focus indicator
margin_vertical	int	2	vertical margin of the focus indicator
border_radius	int	auto	border radius of the focus indicator. (If this option is not in use, the plugin will automaticly detect the border radius of the elements and use these)
wrapper	string	-	id or class of a wrapper container that typically surrounds the elements. If you leave this wrapper the focus indicator will disappear.
timeout	int	200	time in milliseconds after the focus indicator will completly be faded out if no other element will be hovered during this timeout or you leave a specified wrapper.
z-index	int	-1	If you have other z-index elements, you can push the focus indicator into the right layer.

Demo

Check out the demo

Author

Matthias Klan

contact: matthias.klan@gmail.com

Licence

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

推荐源码