gpt4 book ai didi

jquery - 如何创造更好的爆炸效果

转载 作者:行者123 更新时间:2023-12-01 02:06:22 25 4
gpt4 key购买 nike

我正在尝试完成一个动画,该动画应该类似于从下方升起的气泡,然后单击时爆炸并显示文本。

当前的效果是由这段代码做出的:

jQuery('.bubble1').on('click', function () {
jQuery(this).stop(true,true).hide('explode', { pieces: 75 } , 1000, function() {
jQuery('.corpo-del-testo').show();
});
});

I've also made a jsFiddle to demonstrate the effect .

我想要更好的爆破效果,但我找不到解决方案,有人有类似的问题或知道如何实现更“真实”的气泡状爆炸吗?就像爆发一样。

提前致谢。

最佳答案

这是我创建的另一种气泡弹出效果。

http://jsfiddle.net/EkZBg

<div id="content">
<div id="bubble"></div>
<div id="dummy_debris" class="debris" />
</div>

<script>

$(function(){
// Document is ready
$("#bubble").on("click", function(e) {
pop(e.pageX, e.pageY, 13);
});
});

function r2d(x) {
return x / (Math.PI / 180);
}

function d2r(x) {
return x * (Math.PI / 180);
}

// Specify particle_count as 10 + Math.random()*10 to make things interesting!
function pop(start_x, start_y, particle_count) {
arr = [];
angle = 0;
particles = [];
offset_x = $("#dummy_debris").width() / 2;
offset_y = $("#dummy_debris").height() / 2;

for (i = 0; i < particle_count; i++) {
rad = d2r(angle);
x = Math.cos(rad)*(80+Math.random()*20);
y = Math.sin(rad)*(80+Math.random()*20);
arr.push([start_x + x, start_y + y]);
// You could use an IMG tag here instead to make the particles sprites
z = $('<div class="debris" />');
z.css({
"left": start_x - offset_x,
"top": start_y - offset_x
}).appendTo($("#content"));
particles.push(z);
angle += 360/particle_count;
}

$.each(particles, function(i, v){
$(v).show();
$(v).animate({
top: arr[i][1],
left: arr[i][0],
width: 4,
height: 4,
opacity: 0
}, 600, function(){
$(v).remove()
});
});
}
</script>

<style>
/* Add browser prefixes as-needed. See CSS3please.com */
.debris {
display: none;
position: absolute;
width: 28px;
height: 28px;
background-color: #ff00ff;
opacity: 1.0;
overflow: hidden;
border-radius: 8px;
}

#bubble {
position:absolute;
background-color: #ff0000;
left:150px;
top:150px;
width:32px;
height:32px;
border-radius: 8px;
z-index: 9;
}
</style>

关于jquery - 如何创造更好的爆炸效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14457248/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com