Image Hover

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-14 07:26:44

软件介绍

Overview

ImgHover is a simple way to use hovering image on your site.

You can use fade effect to switch hovering images as well.

Usage

If you want to provide hovering behaviour to all the images, you can write simply like below;

$(document).ready(function(){
  $('img').imghover();
});

<img src="/your/path/original.gif" />

When mouse-over this image, file "/your/path/original_o.gif" shows on the element.

Bulk Setting

You can call this method on the elements other than images as well.

$(document).ready(function(){
  $('div.image-container').imghover();
});

In this case, ImgHover provides the function to the images under 'image-container' element.

Options

prefix

Create hovered image by original image name and prefix.

$('img').imghover({prefix: 'hover/'});

<img src="/your/path/image1.gif" />

In this case, "/your/path/hover/image1.gif" will be provided as hovered image.

Default value is null.

suffix

Create hovered image by original image name and suffix.

$('img').imghover({suffix: '-hovered'});

<img src="/your/path/image1.gif" />

In this case, "/your/path/image1-hovered.gif" will be provided as hovered image.

Default value is 'o'. # for my colleagues ;-p

src

Specify hovered image.

Defautl value is null.

btnOnly

When ImgHover was called to container element(s), the function find only or with anchor link. This option is useful to avoid empty gif, site logo and so on.

Default value is true.

fade

You can use fade effect to switch images.

Default value is false.

fadeSpeed

The speed of fade effect.

Default value is 500.

Easy way to use

This plugin is very handy when you use this with jGlycy.

本文地址:https://codercto.com/soft/d/23338.html

未来世界的幸存者

未来世界的幸存者

阮一峰 / 人民邮电出版社 / 2018-6-1 / 39.00 元

本书为阮一峰博客文集,主要收录的是作者对技术变革的影响的一些思考,希望能够藉此书让读者意识到世界正在剧烈变化,洪水就在不远处,从而早早准备出路。本书适合所有乐于思考的读者。一起来看看 《未来世界的幸存者》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具