拉开华丽的序章-使用JS制作开幕动画

开始之前先看DEMO吧，请点击这里

开发准备工具：

1.jquery.easing.js

jquery.easing是一个效果插件，很多人也许会比较眼生，因为这个很少使用，但是他提供的效果却是相当的COOL。此DEMO的开幕及闭幕就是用此插件完成的.

2.jquery.js

这个就不用介绍了吧.

实践Ing:

先把HTML的底图构建出来：

[HTML]

<div class=”leftcurtain”><img src=”../Pic/frontcurtain.jpg”/></div>
<div class=”rightcurtain”><img src=”../Pic/frontcurtain.jpg”/></div>
<img class=”logo”   src=”../Pic/buildinter.png”/>
<a  class=”rope” href=”#”><img src=”../Pic/rope.png”/></a>

[/HTML]

leftcurtain 和 rightcurtain分别是左右两边的幕景，我们会使用JS来控制两边的幕景慢慢伸展开

脚本代码：

[javascript]

$(document).ready(function() {
$curtainopen = false;
$(“.rope”).click(function(){
$(this).blur();
if ($curtainopen == false){

$(this).stop().animate({top: ‘0px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
$(“.leftcurtain”).stop().animate({width:’60px’}, 2000 );
$(“.rightcurtain”).stop().animate({width:’60px’},2000 );
$curtainopen = true;

}else{

$(this).stop().animate({top: ‘-40px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
$(“.leftcurtain”).stop().animate({width:’50%’}, 2000 );
$(“.rightcurtain”).stop().animate({width:’51%’}, 2000 );
$curtainopen = false;

}

return false;

});

});

[/javascript]

DEMO over..

欢迎各种拍砖