-
Notifications
You must be signed in to change notification settings - Fork 135
/
Copy pathindex.php
110 lines (106 loc) · 4.55 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html>
<head>
<?php
$key = '首页';
include('_include/header.php');
?>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<?php
include('_include/nav.php');
?>
<div class="zxx_body">
<div class="zxx_constr">
<!-- body of index.php -->
<div class="index_box">
<div id="indexSlide1" class="index_slide index_explain">
<span class="index_text">好苦恼啊！首页应该放些什么东西呢？<br>
要不，什么都来一点？幸福好滋味！^_^</span><i class="index_valign"></i>
</div>
<div id="indexSlide2" class="index_slide index_hidden">
<img data-src="./img/index/hello.jpg" alt="大家好">
</div>
<div id="indexSlide3" class="index_slide index_explain index_hidden">
<span class="index_text">喂喂喂，就一张红白花花的图，好平淡哦~<br>
要不，加点作料什么的？比方说小标题？</span><i class="index_valign"></i>
</div>
<div id="indexSlide4" class="index_slide index_hidden">
<p class="index_caption">国庆节野钓渔获，超赞的野生鲫鱼！Photo by <a href="http://www.zhangxinxu.com/" class="index_caption_a">zhangxinxu</a></p>
<img data-src="./img/index/hello.jpg" alt="大家好">
</div>
<div id="indexSlide5" class="index_slide index_explain index_hidden">
<span class="index_text">或者来段魅惑的描述性文字？</span><i class="index_valign"></i>
</div>
<div id="indexSlide6" class="index_slide index_descr index_hidden">
<img data-src="./img/index/hello.jpg" class="index_anim_img" alt="大家好">
<div class="index_cell">
<div class="index_article">
<h4>金秋野钓记</h4>
<p>金秋有中秋佳节，还有国庆长假，都是钓鱼的好时节啊！</p>
<p>但是，夫人他要学车。作为新世纪的好男人，有义务负责接送。因此，去天塘钓鱼就不现实，每次接送都要废掉好几个小时，是不划算的。因此，就去学车地点附近的野河钓鱼。</p>
<p>哈哈，完全是展示小时候多年的野钓技艺哈~ 没怎么认真钓，都有几斤的野生鲫鱼上钩，还有很多鳑鲏，雷管这些猫鱼，真是不亦乐乎……</p>
<p><a href="http://www.zhangxinxu.com/life/?p=418">查看全部 »</a></p>
</div>
</div>
</div>
<div id="indexSlide7" class="index_slide index_explain index_hidden">
<span class="index_text">下面要出现的是？……</span><i class="index_valign"></i>
</div>
<div id="indexSlide8" class="index_slide index_hidden">
<iframe height="100%" width="100%" data-src="http://player.youku.com/embed/XNjE0Nzc0ODYw" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<div id="indexControl" class="index_control"></div>
<p id="indexNav" class="index_nav">
<a href="javascript:" class="on" data-rel="indexSlide1">1</a>
<a href="javascript:" data-rel="indexSlide2">2</a>
<a href="javascript:" data-rel="indexSlide3">3</a>
<a href="javascript:" data-rel="indexSlide4">4</a>
<a href="javascript:" data-rel="indexSlide5">5</a>
<a href="javascript:" data-rel="indexSlide6">6</a>
<a href="javascript:" data-rel="indexSlide7">7</a>
<a href="javascript:" data-rel="indexSlide8">8</a>
</p>
</div>
</div>
<?php
include('_include/footer.php');
?>
<script>
$("#indexNav a").powerSwitch({
animation: "translate",
classAdd: "on",
classPrefix: "index_",
container: $("#indexControl"),
onSwitch: function(target) {
var eleLazyLoad = target.find("img, iframe").get(0), index = target.data("index");
if (eleLazyLoad && !eleLazyLoad.src) {
eleLazyLoad.src = eleLazyLoad.getAttribute("data-src");
}
// 第4帧标题的淡入淡出效果
if (index == 3) {
setTimeout(function () {
target.find("p").fadeIn();
}, 250);
} else {
setTimeout(function () {
$("#indexSlide4 p").hide();
}, 250);
}
// 第6帧CSS3驱动的动画效果
if (index == 5) {
setTimeout(function () {
target.addClass("active");
}, 50);
} else {
setTimeout(function () {
$("#indexSlide6").removeClass("active");
}, 250);
}
}
});
</script>
</body>
</html>