翻日历效果 背景音乐停止播放
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>我的2014 第一次出行</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="js/jquery-1.10.2.min.js" charset="utf-8" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
@charset "utf-8";
/* CSS Document */
/****************/
*{ margin:0; padding:0 }
img{ border:0 }
html{min-height:100%;min-width:100%;}
body{width:100%;height:100%; word-break:break-all;word-wrap:break-word;font-size:20px; color:#000; font-family:"微软雅黑",Arial, Helvetica, sans-serif; margin:0;}
/*content*/
#content{width:1200px;height:800px;margin:0 auto;background:url(../images/bg.jpg);position:relative;}
#flip{width:706px;height:479px;position:absolute;left:276px;background:url(../images/cover.png);overflow:hidden}
#music{width:140px;cursor:pointer;position:absolute;left:96px;top:7px;background:url(../images/music.png) no-repeat left top;height:98px;font-size:24px;padding-left:60px;line-height:60px;}
#left{position:absolute;left:50px;bottom:60px;z-index:99;cursor:pointer;}
#right{position:absolute;right:50px;bottom:60px;z-index:99;cursor:pointer;}
#fixed{position:absolute;top:0;left:0;}
#fixed .img{height:479px;width:706px; position:absolute;left:0;top:0;overflow:hidden}
#fixed .img img.image{height:100%;width:100%; position:absolute;left:0;top:0;z-index:1}
#fixed p{ position:absolute;left:50px;top:100px;z-index:2}
.img7{z-index:5}.img6{z-index:10}.img5{z-index:20}.img4{z-index:30}.img3{z-index:40}.img2{z-index:50}.img1{z-index:60}.img0{z-index:70}
</style>
</head>
<body>
<iframe id="ifr" src="action.html" height="0" width="0" scrolling="no" frameborder="0"></iframe>
<div id="content">
<div id="music">音乐 <span id="open" style="font-weight:bold;">开</span>/<span id="close">关</span></div>
<div id="flip">
<a id="left"><img src="images/left.png" /></a><a id="right"><img src="images/right.png" /></a>
<div id="fixed">
<div class="img img0" style="height:479px;"><p>阿斯蒂芬</p><img class="image" src="images/img_0.png"></div>
<div class="img img1"><p>规划科目愉快</p><img class="image" src="images/img_1.png"></div>
<div class="img img2"><p>iunbgfb</p><img class="image" src="images/img_2.png"></div>
<div class="img img3"><p>轻轻巧巧</p><img class="image" src="images/img_3.png"></div>
<div class="img img4"><p>吾问无为谓我我我</p><img class="image" src="images/img_4.png"></div>
<div class="img img5"><p>教育局任霆发够v</p><img class="image" src="images/img_5.png"></div>
<div class="img img6"><p>鸟语v刹为</p><img class="image" src="images/img_6.png"></div>
<div class="img img7"><p>哦iunbvfd</p><img class="image" src="images/img_7.png"></div>
</div>
</div>
</div>
<script>
var part = 0,play = 0;
$(function(){
$("#music").click(function(){
if(play == 0){
chageIframe('');
$("#close").css("fontWeight","bold");
$("#open").css("fontWeight","normal");
play = 1;
}else{
chageIframe('action.html');
$("#close").css("fontWeight","normal");
$("#open").css("fontWeight","bold");
play = 0;
}
});
$("#right").click(function(){
if (part < $("#fixed .img").size()-1) {
$("#fixed .img:eq(" + part + ")").stop().animate({
height: "0"
},
1000);
$("#fixed .img:eq(" + part + ") p").hide(200);
part++;
}
});
$("#left").click(function(){
if (part >0) {
$("#fixed .img:eq(" + (part-1) + ")").stop().animate({
height: "479px"
},
1000);
setTimeout(function(){
$("#fixed .img:eq(" + (part) + ") p").show(200);
},500);
part--;
}
});
});
function chageIframe(url){
var urlValue = url;
document.getElementById("ifr").src = urlValue;
}
</script>
</body>
</html>
