代码添加十分简单：
首先引入：
<link href=”adipoli.css” rel=”stylesheet” type=”text/css”/>
<script src=”http://shanmao.me/f/jquery.min.js”></script>
<script src=”jquery.adipoli.min.js” type=”text/javascript”></script>
执行代码更简单：
<script>
$(‘#image1’).adipoli();
</script>
自定义的：
$(‘#image1’).adipoli({
‘startEffect’ : ‘normal’,
‘hoverEffect’ : ‘popout’
});
看我的demo 代码：
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片效果jquery插件下载</title>
<!–[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<link href="adipoli.css" rel="stylesheet" type="text/css"/>
<script src="http://shanmao.me/f/jquery.min.js"></script>
<script src="jquery.adipoli.min.js" type="text/javascript"></script>
</head>
<body>
<img src="http://www.cityofsteam.com/wp-content/themes/cityofsteamwpnew/images/banner/Homepage-between.jpg" id="image1"/>
<img src="http://www.cityofsteam.com/wp-content/themes/cityofsteamwpnew/images/banner/hdnew5.jpg" id="image2"/>
<img src="http://www.cityofsteam.com/wp-content/themes/cityofsteamwpnew/images/banner/hdnew3.jpg" id="image3"/>
<img src="http://www.cityofsteam.com/wp-content/themes/cityofsteamwpnew/images/banner/hdnew5.jpg" id="image4"/>
<img src="http://www.cityofsteam.com/wp-content/themes/cityofsteamwpnew/images/banner/hdnew3.jpg" id="image5"/>
<script>
$(‘#image1’).adipoli();
$(‘#image2’).adipoli({
‘startEffect’ : ‘normal’,
‘hoverEffect’ : ‘popout’
});
$(‘#image3’).adipoli({
‘startEffect’ : ‘overlay’,
‘hoverEffect’ : ‘foldLeft’
});
$(‘#image4’).adipoli({
‘startEffect’ : ‘transparent’,
‘hoverEffect’ : ‘sliceUpRandom’
});
$(‘#image5’).adipoli({
‘startEffect’ : ‘transparent’,
‘hoverEffect’ : ‘boxRandom’
});
</script>
</body>
</html>
[/code]
帮助文档（可选选项：）
Available Options:
- startEffect : Default style of image
- hoverEffect : Image style on mouse over
- imageOpacity : opacity of image considered when start effect is transparent or overlay
- animSpeed : Animation speed for the effect
- fillColor : Overlay color
- textColor : Text Color
- overlayText : Default HTML to be displayed on overlay
- slices : Number of slices for slice animations
- boxCols : Number of boxes in a row for box animations
- boxRows : Number of rows for box animations
- popOutMargin : Margin of Image popout
- popOutShadow : Shadow length of popout image. Shadow works for those browsers which support text-shadow css.
Start Effects:
- transparent
- normal
- overlay
- grayscale
Hover Effects:
- normal
- popout
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpRandom
- sliceUpDown
- sliceUpDownLeft
- fold
- foldLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse