2

我在一个网站上有一个登录页面，其中只有一个地球图像。

现在进入主站点，我希望在登陆页面中出现地球裂开然后用户进入主站点的效果。

我目前在做什么：我目前将整个登录页面图像分为 4 个 div，每个 div 中都有一个单独的图像（共同形成地球）。现在，当用户必须进入该站点时，我将 4 个 div 中的每一个简单地动画到屏幕的每个角落。但我需要开裂效果和其他一些视觉上吸引人的效果。

任何想法如何实现这一目标？Javascript（或 jQuery）解决方案更可取。

4

3 回答 3

2
  • slideDown()在地球 img 上覆盖一个裂纹图像并使其(jQuery)。

见http://jsfiddle.net/NKqNh/

$(function() {
   $('#crack').slideDown(800); 
});​

<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>​

编辑：

在你的回答中，这里是一个更新的 js，它使用一个匿名函数的回调来实现破解后的爆炸。 http://jsfiddle.net/eC9HM/2/

$(function() {
    $('#crack').slideDown(800, function() {
      $('#earth, #crack').hide('explode', {pieces: 16}, 2000);
    });
});
​
于 2012-06-11T06:32:37.573 回答
1

您可以使用explodejQuery UI 的效果。它将图像分成许多块（你可以选择你想要的块）并且图像会消失

已更新-

试试这个代码 -

<html>

<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {

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

    $(this).hide("explode", { pieces: 24 }, 2000);

  });

});
</script>

</head>

<body style="font-size:62.5%;">

  <img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg">

</body>

</html>
于 2012-06-11T06:32:29.243 回答
0

感谢您的答案，但我发现我的答案结合了此处提供的其他两个答案。所以我只是在这里摆弄小提琴，这样将来可能会有用：

更新的小提琴：

http://jsfiddle.net/gopi1410/eC9HM/1/

于 2012-06-11T07:05:17.067 回答