图片鼠标悬停特效 Adipoli 20多种效果jQuery插件
来源:互联网 发布:数据库审计测试方法 编辑:程序博客网 时间:2024/05/31 19:29
查看原文
查看在线演示Demo和更多原文内容教程:
http://www.ibloger.net/article/1209.html
Adipoli jQuery Image Hover Plugin
简 介
Adipoli 是一个简单的 jQuery plugin,可以给图片定义鼠标悬停时的效果。
这个插件可以帮助你添加各种不同的悬浮特效到你指定的图片上,特别适合制作你的相册,或者是网站个人作品集展示。你可以通过这种悬浮特效帮助用户集中浏览当前的图片,提高用户使用体验
主要特性
- 支持20多种不同的悬浮特效,包括初始特效和悬浮特效
- 支持主流浏览器,同时针对兼容HTML5的浏览器有特殊效果
- 支持多选项,用户可以自定义相关设定
如何使用
导入需要的类库和CSS:
<link href="css/adipoli.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.7.1.js" type="text/javascript"></script><script src="js/jquery.adipoli.min.js" type="text/javascript"></script>
指定需要悬浮特效的图片:
<script> $('#gbin1-image').adipoli();</script>
或者你可以指定选项:
$('#image1').adipoli({ 'startEffect' : 'normal', 'hoverEffect' : 'popout'});
选项介绍
- startEffect :缺省图片样式
- hoverEffect : 悬浮后的图片样式
- imageOpacity : 初始图片效果为透明或者覆盖效果时的图片透明度
- animSpeed : 特效的动画速度
- fillColor : 覆盖颜色
- textColor : 文字颜色
- overlayText : 缺省显示在覆盖层上的HTML
- slices : 切片动画特效中的切片数量
- boxCols : 盒式特效中的盒子个数
- boxRows : 盒式特效中行数
- popOutMargin : 图片弹出的margin
- popOutShadow : 图片弹出效果的阴影长度,只支持哪些支持text-shadow的浏览器
特效支持
初始特效:
- transparent
- normal
- overlay
- grayscale
悬浮特效
- normal
- popout
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpRandom
- sliceUpDown
- sliceUpDownLeft
- fold
- foldLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
1 0
- 图片鼠标悬停特效 Adipoli 20多种效果jQuery插件
- 分享一个分享超酷的添加图片悬浮特效jQuery插件 - Adipoli
- jquery 插件之鼠标悬停图片切换效果(附详细注释)
- jQuery购物图片中的鼠标悬停显示详细信息效果
- jQuery 鼠标悬停时放大图片的效果
- JQUERY实现鼠标悬停在图片上模拟放大镜效果
- jquery特效--鼠标悬停显示提示信息
- jQuery鼠标悬停半透明遮罩效果
- jQuery鼠标悬停放射出炫幻效果
- 鼠标悬停之放大图片的效果
- HTML 图片鼠标悬停动态效果
- 鼠标悬停图片、文字css3效果
- 鼠标悬停图片放大提示效果
- 鼠标滑过图片悬停效果
- 【css3】鼠标悬停图片旋转效果
- 鼠标悬停,图片向四周放大效果
- -jQuery图片九宫格样式鼠标悬停图片滑动切换效果
- jquery鼠标悬停时的放大图片的图片提示效果
- JAXB基本使用
- Oracle
- C#实现AES加解密方法
- SAP的SD模块中客户的销售视图--扩充客户销售范围
- Netty版本升级血泪史之线程篇
- 图片鼠标悬停特效 Adipoli 20多种效果jQuery插件
- POJ-1159-Palindrome
- python自然语言处理:编码问题
- xcode 中使用ffmpeg 编译的静态库
- lamp的搭建
- 简书首页推荐文章文字爬取,用txt保存
- C语言入门(十九)指针函数和函数指针
- 技术解析 | 两台成云—大华微型云存储系统
- 如何自学Android编程——Android自学资料大全