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

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

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

使用方法
在页面引入以下jquery.min.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

文件信息:

    0

    发表评论