jQuery点击图片爆炸特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery点击图片爆炸特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery���ͼƬ��ը��Ч</title>
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.js"></script>
    <script src="javascript.js"></script>
</head>
<body>
    <div class="container">
        <div class="clipped-box">
            <div class="content">
                <h1>CLICK TO DELETE ME</h1>
                <p>I'll explode into pieces!</p>
            </div>
        </div>
    </div>
</body>
</html>

JS代码(javascript.js):

$(document).ready(function(){
	// Generate the clips. In this case I'm using 5 (or 25 pieces)(genClips = function(){
	// For easy use$t = $('.clipped-box');
	// Like I said,we're using 5!var amount = 5;
	// Get the width of each clipped rectangle.var width = $t.width() / amount;
	var height = $t.height() / amount;
	// The total is the square of the amountvar totalSquares = Math.pow(amount,2);
	// The HTML of the contentvar html = $t.find('.content').html();
	var y = 0;
	for(var z = 0;
	z <= (amount*width);
	z = z+width){
	$('<div class="clipped" style="clip:rect('+y+'px,'+(z+width)+'px,'+(y+height)+'px,'+z+'px)">'+html+'</div>').appendTo($t);
	if(z === (amount*width)-width){
	y = y + height;
	z = -width;
}
if(y === (amount*height)){
	z = 9999999;
}
}
}
)();
	// A quick random function for selecting random numbersfunction rand(min,max){
	return Math.floor(Math.random() * (max - min + 1)) + min;
}
// A variable check for when the animation is mostly overvar first = false,clicked = false;
	// On click$('.clipped-box div').on('click',function(){
	if(clicked === false){
	clicked = true;
	$('.clipped-box .content').css({
	'display':'none'}
);
	// Apply to each clipped-box div.$('.clipped-box div:not(.content)').each(function(){
	// So the speed is a random speed between 90m/s and 120m/s. I know that seems like a lot// But otherwise it seems too slow. That's due to how I handled the timeout.var v = rand(120,90),angle = rand(80,89),// The angle (the angle of projection) is a random number between 80 and 89 degrees.theta = (angle * Math.PI) / 180,// Theta is the angle in radiansg = -9.8;
	// And gravity is -9.8. If you live on another planet feel free to change// $(this) as selfvar self = $(this);
	// time is initially zero,also set some random variables. It's higher than the total time for the projectile motion// because we want the squares to go off screen.var t = 0,z,r,nx,ny,totalt = 15;
	// The direction can either be left (1),right (-1) or center (0). This is the horizontal direction.var negate = [1,-1,0],direction = negate[ Math.floor(Math.random() * negate.length) ];
	// Some random numbers for altering the shapes positionvar randDeg = rand(-5,10),randScale = rand(0.9,1.1),randDeg2 = rand(30,5);
	// Because box shadows are a bit laggy (by a bit I mean 'box shadows will not work on individual clipped divs at all')// we're altering the background colour slightly manually,in order to give the divs differentiation when they are// hovering around in the air.var color = $(this).css('backgroundColor').split('rgb(')[1].split(')')[0].split(','),colorR = rand(-20,20),// You might want to alter these manually if you change the colorcolorGB = rand(-20,20),// To get the right consistency.newColor = 'rgb('+(parseFloat(color[0])+colorR)+','+(parseFloat(color[1])+colorGB)+','+(parseFloat(color[2])+colorGB)+')';
	// And apply those$(this).css({
	'transform':'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)','background':newColor}
);
	// Set an intervalz = setInterval(function(){
	// Horizontal speed is constant (no wind resistance on the internet)var ux = ( Math.cos(theta) * v ) * direction;
	// Vertical speed decreases as time increases before reaching 0 at its peakvar uy = ( Math.sin(theta) * v ) - ( (-g) * t);
	// The horizontal positionnx = (ux * t);
	// s = ut + 0.5at^2ny = (uy * t) + (0.5 * (g) * Math.pow(t,2));
	// Apply the positions$(self).css({
	'bottom':(ny)+'px','left':(nx)+'px'}
);
	// Increase the time by 0.10t = t + 0.10;
	// If the time is greater than the total time clear the intervalif(t > totalt){
	clicked = false;
	first = true;
	$('.clipped-box').css({
	'top':'-1000px','transition':'none'}
);
	$(self).css({
	'left':'0','bottom':'0','opacity':'1','transition':'none','transform':'none'}
);
	// Finally clear the intervalclearInterval(z);
}
}
,10);
	// Run this interval every 10ms. Changing this will change the pace of the animation}
);
}
}
);
	r = setInterval(function(){
	// This is a bit rough but it does the jobif(first === true){
	// I've just put this in so the deleted box will come down again after its been clicked.// That way you can keep pressing delete.$('.clipped-box').css({
	'top':'0','transition':''}
);
	$('.clipped-box div').css({
	'opacity':'1','transition':'','background-color':''}
);
	$('.content').css({
	'display':'block'}
);
	first = false;
}
}
,300);
}
);

CSS代码(style.css):

body{margin:0;padding:0;background:#f0fcff;font-family:'adelle-sans',sans-serif;overflow:hidden;height:100%;}
.container{width:400px;top:100px;position:relative;margin:0px auto;}
.clipped-box{cursor:pointer;-webkit-transition:top 1.2s linear;transition:top 1.2s linear;}
.clipped-box div{z-index:9999999;color:#fff;font-size:1em;padding:50px 20px;text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;background:#4F9CC7;}
.clipped-box div h1{text-shadow:2px 2px rgba(0,0,0,0.2);}
.clipped-box,.clipped-box div{width:400px;height:400px;position:relative;}
.clipped-box div{position:absolute;top:auto;left:0;background:#4F9CC7;-webkit-transition:-webkit-transform 1.4s ease-in,background 0.3s ease-in;transition:transform 1.4s ease-in,background 0.3s ease-in;}

附件:下载该文件资源,减少时间成本(增值服务)