css单击图片变大再点击还原,jquery css3鼠标点击图片滑动放大切换

特效描述：jquerycss3 鼠标点击 图片滑动 放大切换。jquery css3动画属性制作鼠标点击图片滑动放大切换显示

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

鼠标点击图片试试效果

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();

$("").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p"));

if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")")

},500);

});

});