java爆炸图片切换,jQuery实现图片爆炸效果

html{

perspective: 800px;

}

.bom{

/*margin: 50px auto;*/

width: 600px;

height: 400px;

position: relative;

}

.bom div{

background-color: red;

position: absolute;

background-position: ;

}

点我爆炸

$(function(){

var $parent = $(".bom");

var IMG_WIDTH = 600;

var IMG_HEIGHT = 400;

$("span").click(function(){

boom(10,8);

});

//图片宽度600*400

/*图片爆炸效果思路，把整个图片大小的div，拆分成 垂直n个，水平m个小div.

然后创建出这些div，并添加到父元素中，让各个子元素随机改变某个属性的值。

可以加上旋转等效果.

*

* */

function boom(hcount,wcount){

//每次都清除添加的子元素，避免多执行几次CPU和内存吃不消

var $sub = $parent.children();

$sub.remove();

var item_width = (IMG_WIDTH / wcount);

var item_height = (IMG_HEIGHT / hcount);

for(var i = 0;i

for(var j=0;j

var $div = $("

$div.css({

width:item_width,

height:item_height,

left:item_width*j,

top:item_height*i,

"background-image": "url(./img/1.jpg)",

"background-position":(-j*item_width)+"px "+(-i*item_height)+"px "

});

$parent.append($div);

}

}

$sub = $parent.children();

$.each($sub, function() {

var $ele = $(this);

var rand = Math.random()*200 - 100;

var rand2 = Math.random()*200 - 100;

var rand3 = Math.random()*360 - 180;

var left = parseInt($ele.css("left"));

var top = parseInt($ele.css("top"));

$ele.animate({

left:rand+left,

top:top+rand2,

opacity:0

},1500);

var deg = 0;

var step = rand3 >=0 ? 2 : -2;

var dirNum = parseInt(Math.random()*10);

var direct = "X";

if(dirNum%3==0){

direct = "Y";

}else if(dirNum%3==1){

direct = "Z";

}

var time = setInterval(function(){

deg +=step;

if((rand3<0&&deg<=rand3)||(rand3>0&&deg>=rand3)){

clearInterval(time);

}

$ele.css({

transform:'rotate'+direct+'('+deg+'deg)'

});

},10);

});

}

});