<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
/*content*/
.content{
position: relative;
margin: 40px auto 0;
width: 80%;
height: 300px;
background:#2e2e2e;
margin: 30px auto;
}
.l-pic-index{
position: absolute;
left: 50%;
top: 1px;
z-index:2;
width:10%;
height:100%;
/*background: url("./images/left.png") no-repeat right 0;*/
background-color:orange;
margin-left:-10%;
}
.icon-pic-img{width:100%;height:100%}
.r-pic-index{
position: absolute;
right: 50%;
top: 0;
z-index: 2;
margin-right:-10%;
width:10%;
*width:10%;
height:100%;
/*background: url("./images/right.png") no-repeat left 0;*/
background-color:yellow;
}
.l-bg-index{
position: absolute;
top: 0;
left: 45%;
z-index: 1;
width: 5%;
height: 100%;
background-color: #fff;
margin-left:5%
}
.r-bg-index{
position: absolute;
top: 0;
right: 45%;
z-index: 1;
width: 5%;
margin-right:5%;
height:100%;
background-color: #fff;
}
.main-index{
display: none;
overflow: hidden;
zoom:1;
position: absolute;
z-index: 5;
width:100%;
height:100%;
left:0px;
top:10px;
padding:10%;
color: #2e2e2e;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content">
<div class="l-pic-index"><img src="./images/left.png" class="icon-pic-img"/></div>
<div class="r-pic-index"><img src="./images/right.png" class="icon-pic-img"/></div>
<div class="l-bg-index"></div>
<div class="r-bg-index"></div>
<div class="main-index">
<h1 class="title">详细介绍</h1>
<p class="intro-text">
传统音乐是在以典河流域为中心的中原音乐和四域音乐以及外国音乐的交流融合之中形成发展起来的。
</p>
</div>
</div>
<script>
$(document).ready(function(){
//卷轴展开效果
$(".l-pic-index").animate({'left':'10%'},1500);
$(".r-pic-index").animate({'right':'10%'},1500);
$(".l-bg-index").animate({'width':'45%'},1500);
$(".r-bg-index").animate({'width':'45%'},1500,function(){
$(".main-index").fadeIn(800);
});
});
</script>
</body>
</html>
