Uptdated -

Question

我在网站上有一个目标网页，其中只有一张地球图片。

现在要进入主站点，我希望在登陆页面中有一些效果，即地球裂开，然后用户进入主站点。

我目前正在做的事情：我目前将整个着陆页图像划分为4个div，每个图像中都有一个单独的图像（共同形成地球）。现在，当用户必须进入该站点时，我简单地将4个div中的每一个设置为屏幕的每个角。但我需要破解效果和其他一些视觉上吸引人的效果。

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

Answer 1

覆盖一个裂缝图像并将其slideDown()（jQuery）覆盖在地球上。

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

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

修改：

在your answer中，这是一个更新的js，它使用回调到破解后爆炸的匿名函数。 http://jsfiddle.net/eC9HM/2/

$(function() { $('#crack').slideDown(800, function() { $('#earth, #crack').hide('explode', {pieces: 16}, 2000); }); });

Answer 2

您可以使用jQuery UI的explode效果。它会将图像分成许多部分（您可以选择所需的部分）并且图像将消失

Uptdated -

试试这段代码 -

<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>

Answer 3

感谢您的回答，但我找到了我的答案，结合了此处提供的其他两个答案。所以我只是在这里捣蛋，所以这可能在将来有用：

更新了小提琴：

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

页面破解效果（非闪存）

3 个答案:

Uptdated -