-
Notifications
You must be signed in to change notification settings - Fork 1
/
home.html
160 lines (153 loc) · 5.68 KB
/
home.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/amazeui.css">
<link rel="stylesheet" href="css/home.css">
<title>Document</title>
</head>
<body>
<div class="am-g head">
<div class="nav">
<table class="nav-table">
<tr>
<td class="logo">
<div class="logo-title">
<img class="title" src="img/标题.png" alt="">
</div>
<div class="logo-img">
<img src="img/农牧云3.png" alt="">
</div>
</td>
<td>
<a href="">首页
<br>
<span>Home Page</span>
</a>
</td>
<td>
<a href="">
云上集市
<br>
<span>Cloud Shop</span>
</a>
</td>
<td>
<a href="">
云上农场
<br>
<span>Cloud Farm</span>
</a>
</td>
<td>
<a href="">
合作农场
<br>
<span>cooperative Farm</span>
</a>
</td>
<td>
<a href="">云游天下
<br>
<span>Travel world</span>
</a>
</td>
<td class="company">
<a href="">
关于我们
<br>
<span>About Us</span>
</a>
</td>
<!-- <td class="serch">
<div class="am-input-group">
<input type="text" class="am-form-field" style="border-top-left-radius: 15px;border-bottom-left-radius: 15px;">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button" style="border-bottom-right-radius: 15px;border-top-right-radius: 15px;">
<span class="am-icon-search"></span>
</button>
</span>
</div>
</td> -->
</tr>
</table>
</div>
</div>
<div class="am-g">
<div class="mp4" id="changeImg">
<video id="vedio" width="100%" height="100%" autoplay="autoplay" loop="true">
<source src="audio/农牧云2.mp4" type="video/mp4"> 您的浏览器不支持此种视频格式。
</video>
</div>
</div>
<div class="am-g desc-list">
<div class="am-g desc">
<h1>云养殖-线上养殖</h1>
<p>每期定期支付，农户、农场、牧场帮您养殖；养殖属于您自己的健康食物。</p>
</div>
<div class="am-g desc">
<h1>云养殖-实时查看</h1>
<p>无论你在哪儿，你都可以随时可以查看订购商品的成长状态。</p>
</div>
<div class="am-g desc">
<h1>云养殖-战略合作</h1>
<p>全国各大牧场农场共同联盟，保证商品的多样性、商品的新鲜性。</p>
</div>
</div>
<div class="foot">
<p>©2018 - 版权所有 </p>
<p>PC版 | 本站自己手动搭建 |
<a href="">管理登录</a>
</p>
</div>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/amazeui.js"></script>
<script>
$(window).bind("scroll", function () {
var top = $(this).scrollTop(); // 当前窗口的滚动距离
// console.log($(this))
if (top > 1) {
$(".nav").css({
"background": "white",
"opacity": "0.8",
"transition": "background-color 1s"
});
$(".nav-table a").css("color", "black");
$(".company a").css("color", "black");
$(".logo span").css("color", "black");
$(".am-input-group").css("opacity", "1")
$(".title").attr("src", "img/标题-黑.png")
}
if (top == 0) {
$(".nav").css({
"background": "none",
"opacity": "1",
});
$(".nav-table a").css("color", "white");
$(".company a").css("color", "white");
$(".logo span").css("color", "white");
$(".am-input-group").css("opacity", "0.5")
$(".title").attr("src", "img/标题.png")
}
});
var seconds = 0;
var changeImg = '<img src="img/景.jpg" style="width:100%;transition:2s;" alt="">';
$(() => {
function setTime() {
seconds++;
console.log(seconds)
if (seconds == 20) {
$("#vedio").css("display", "none");
$("#changeImg").append(changeImg)
clearInterval(time);
}
}
var time = setInterval(setTime, 1000);
var vedio = $("#vedio");
vedio.attr("loop", "");
});
</script>
</html>