jQuery实现点击图片滑动缩放切换特效

简要教程

这是一款jQuery基于animate.css库制作点击图片滑动缩放大小切换代码，小编技术有限，此特效暂时不兼容IE6，7，8，高手们可以可以再做修改让兼容的更完美就好了。

使用方法

在页面引入以下jquery.min.js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
var imgs=[
  "images/island_1x.png",
  "images/banana.png",
  "images/rescued-illos_1x.png",
  "images/rivalry_1x.png",
  "images/sir_crags_a_lot_1x.png",
  "images/sf-cryptids_1x.png",
  "images/db_space_1x.png",
  "images/xmas1_1x.png"
];
  
var counter =0;
$(document).ready(function () {
$(".center").on("click","img",function(){
  $(this).removeClass("zoomIn").addClass("fadeOutRight");
  counter++;
  setTimeout(function(){
      if(counter==imgs.length) counter=0;
      $(".center img").remove();
      $("<img/>").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p"));
      if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")")
  },500);
});
  
});
</script>