<!--
Animate a Curtain Opening with jQuery
index.html
By Sam Dunn
2009 Build Internet! www.buildinternet.com
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Animate a Curtain Opening with jQuery | Build Internet</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".rope").click(function(){
$(this).blur();
if ($curtainopen){
//$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$("#juanzhouBox").stop().animate({width:'120px'}, 2070 );
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px',marginLeft:'60px'},2000 );
$curtainopen = false;
}else{
//$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$("#juanzhouBox").stop().animate({width:'990px'}, 2200 );
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'50%',marginLeft:'50%'}, 2000 );
$curtainopen = true;
}
return false;
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #4f3722 url('images/darkcurtain.jpg') repeat-x;
}
img{
border: none;
}
#juanzhouBox{
width:120px;
height:365px;
}
.leftcurtain{
width: 50%;
height:100%;
float:left;
background-image:url(images/zhuzi1.png);
}
.rightcurtain{
width: 50%;
height: 365px;
margin-left:60px;
background:url(images/zhuzi2.png) no-repeat;
background-position:right;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.rope{
position: absolute;
top: -40px;
left: 70%;
z-index: 4;
}
</style>
</head>
<body>
<div id="juanzhouBox" >
<div class="leftcurtain"></div>
<div class="rightcurtain"></div>
</div>
<img class="logo" src="images/buildinter.png"/>
<a class="rope" href="#">
<img src="images/rope.png"/>
</a>
</body>
</html>
- 1
- 2
- 3
前往页