jQuery图片效果插件下载

点击此查看demo

代码添加十分简单:

首先引入:

<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