欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

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 代码:

<!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>

 

点击此处下载代码

帮助文档(可选选项:)

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

更多

本文固定链接: http://shanmao.me/web/jquery/jquery-tu-pian-xiao-guo-cha-jian-xia-zai | 山猫的博客

该日志由 admin 于2012年07月31日发表在 jQuery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery图片效果插件下载 | 山猫的博客
关键字: