Skip to content

W
Web-智慧农业

收买神的欢心 / Web-智慧农业

通知 1
Star 1
Fork 0
W
Web-智慧农业

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 d4208eae 编写于 作者: 收买神的欢心's avatar 收买神的欢心
浏览文件
操作

更新index.html

上级
隐藏空白更改
内联 并排
Showing with 280 addition and 0 deletion
index.html 0 → 100644
浏览文件 @ d4208eae
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智慧农业主页</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css" media="all">
.hrLine{
vertical-align:middle; display:inline-block;height: 2px;
}
</style>
</head>
<body text="green" style="font-weight: 600;">
<div id="math">
<div class="image"><img width="3000" height="250" src="images/backGround.png"></div>
<div class="image"><img width="1800" height="160" src="images/person22.png"></div>
<div class="image"><img width="3000" height="250" src="images/hill.png"></div>
<div class="image"><img width="1800" height="160" src="images/leaves.png"></div>
<div class="image"><img width="1800" height="165" src="images/person33.png"></div>
<div class="image"><img width="1950" height="178" src="images/left.png"></div>
<div class="daohan">
<div class="head" style="width: 450px;">
<span class="spana"><a href="http://www.hebau.edu.cn/" style="text-decoration: none;">欢迎您访问智慧农业(河北农业大学版)网站！</a></span>
</div>
<div class="row" style="width:500px;">
<div class="col-lg-6" style="width: 500px;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
<div class="dl">
<div class="right">
<span class="touxian"></span>
<span><a>
<form action="//www.baidu.com/s" target="_blank" method="get" >
<input class="placeholder" name="wd" placeholder=" 搜索……">
<button class="s">检索</button>
</form>
</a></span>
<span><a href="login.html" style="text-decoration: none;">登录</a></span>
<span><a href="register.html" style="text-decoration: none;">注册</a></span>
<button class="tg"><a href="contribute.html" style="text-decoration: none;"><p style="color: white; background-color: orange;">投稿</p></a></button>
</div>
</div>
</div>
</div>
<script>
var math=document.getElementById("math");
var image=document.getElementsByTagName("img");//选择器，匹配选择器的所有元素
var window_width=document.documentElement.clientWidth;//获取整个窗口的宽度
var change=window_width/2/5;//获取鼠标移动2份1屏幕宽度，模糊度发生5px变化的值是多少
console.log(change);
var data_image=[
{x:0,b:4},
{x:0,b:0},
{x:0,b:1},
{x:0,b:4},
{x:0,b:5},
{x:0,b:6},
]
function vague(){
//image[0].style='transform:translate(0px);filter:blur(4px);'; 使不同图片模糊。换用for实现
//image[1].style='transform:translate(0px);filter:blur(0px);';
//image[2].style='transform:translate(0px);filter:blur(1px);';
//image[3].style='transform:translate(0px);filter:blur(4px);';
//image[4].style='transform:translate(0px);filter:blur(5px);';
//image[5].style='transform:translate(0px);filter:blur(4px);';
for(var i in image){
if(image.hasOwnProperty(i)){
var imagearry=image[i];
var data=data_image[i];
imagearry.style='transition: 0.5s linear; transform:translate('+data.x+'px);filter:blur('+data.b+'px);'; //熟记('+data.x+'px)格式。
}
}
}
var x=0;//x坐标本来的位置
var x_new=0;//x坐标新的位置
var x_x=0;//新坐标和原来坐标的差值
math.onmouseover=function(e){ //设置一个值接收鼠标初始位置的值
x=e.clientX;
//console.log(x);
}
math.onmousemove=function(e){ //设置一个值接收鼠标移动位置的值，鼠标移动时执行效果
x_new=e.clientX;
//console.log(x_new);
x_x=x-x_new;
//console.log(x_x);
for(var i in image){
if(image.hasOwnProperty(i)){
var mover_new=(6-parseInt(i))*10;
var imagearry=image[i];
var data=data_image[i];
var new_b=Math.abs(data.b+(x_x/change));
var new_data=x_x/mover_new;
imagearry.style='transform:translate('+new_data+'px);filter:blur('+new_b+'px);'; //熟记('+data.x+'px)格式。
}
}
}
math.onmouseout=function(e){//鼠标移出恢复初始化
vague();
}
var eye=1;
timeout=4000;
function eye_e(){
if(eye==4){
eye=1;
timeout=4000;
}
else{
eye+=1;
timeout=35;
}
image[1].src='images/girl'+eye+'.png';
setTimeout(()=>{
eye_e();
},timeout);
}
window.onload=function(){
vague();
eye_e();
}
</script>
<div id="box">
<div id="first">
<div id="nav">
<ul>
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="son2.html" target="_blank">智慧农业发展历程</a>
</li>
<li>
<a href="son1.html" target="_blank">智慧农业相关技术</a>
</li>
<li>
<a href="son3.html" target="_blank">智慧农业相关案例</a>
</li>
</ul>
</div>
</div>
<div class="a">
<video src="images/video.mp4" width="100%" height="100%" controls="controls">
您的浏览器不支持 video标记。
</video>
</div>
<div class="b">
<table class="table" style="color: #0000FF;">
<caption class="caption" >综合动态</caption>
<tr height="15px"><th></th></tr>
<tr height="30px"><td><a href="http://www.smartag.net.cn/CN/news/news10537.shtml"><pre>中国农业展望大会系列报道——大数据与监测预警 [2021-04-27]</pre></a></td></tr>
<tr height="30px"><td><a href="http://www.smartag.net.cn/CN/news/news10536.shtml"><pre>中国农业展望大会系列报道——农产品国际贸易 [2021-04-27]</pre></a></td></tr>
<tr height="30px"><td><a href="http://www.smartag.net.cn/CN/news/news10535.shtml"><pre>中国农业展望大会系列报道——粮食安全 [2021-04-26]</pre></a></td></tr>
<tr height="30px"><td><a href="http://www.smartag.net.cn/CN/news/news10534.shtml"><pre>中国农业展望大会系列报道——猪肉展望 [2021-04-26]</pre></a></td></tr>
<tr height="30px"><td><a href="http://www.smartag.net.cn/CN/news/news10533.shtml"><pre>祝贺丨《智慧农业（中英文）》期刊多位编委专家及农业领域专... [2021-04-23]</pre></a></td></tr>
<tr height="30px"><td><a href="http://www.smartag.net.cn/CN/news/news10532.shtml"><pre>中国农业展望大会系列报道——玉米展望 [2021-04-23]</pre></a></td></tr>
<tr height="30px"><td><a href="http://www.smartag.net.cn/CN/news/news10531.shtml"><pre>中国农业展望大会系列报道——乡村振兴专题 [2021-04-22]</pre></a></td></tr>
</table>
</div>
<hr class="style-one"/>
<br/>
<hr class="style-two"/>
<div class="c" style=" float: left; ">
<img id="logo" src="images/图标.png" width="100%" align="center"/>
</div>
<div class="c" style="float: left;">
<h3>智慧农业（智慧经济形态）</h3><br />
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智慧农业 是农业中的智慧经济，或智慧经济形态在农业中的具体表现。智慧农业是智慧经济重要的组成部分；对于发展中国家而言，智慧农业是智慧经济主要的组成部分，是发展中国家消除贫困、实现后发优势、经济发展后来居上、实现赶超战略的主要途径。</p>
<br />
<div style=" width:100%; text-align:left; margin-left:15px; margin-right:15px;">
<hr class="hrLine" style="width:50px; "/> 定义 <hr class="hrLine" style="width:80%;"/>
</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智慧农业 是指现代科学技术与农业种植相结合，从而实现无人化、自动化、智能化管理。</p>
<br />
<div style=" width:100%; text-align:left; margin-left:15px; margin-right:15px;">
<hr class="hrLine" style="width:50px; "/> 技术特点 <hr class="hrLine" style="width:73%;"/>
</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智慧农业是物联网技术在现代农业领域的应用，主要有监控功能系统、监测功能系统、实时图像与视频监控功能。</p>
</div>
<div class="c" style="float: left;">
<table id="table" bordercolor="green" width="100%" style="color: #0000FF;">
<caption><h3>相关索引目录</h3></caption>
<tr>
<th></th>
<th></th>
</tr>
<tr height="50px">
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#1" style="text-decoration: none;">1.定义</a></td>
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#6" style="text-decoration: none;">6.延伸应用</a></td>
</tr>
<tr height="50px">
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#2" style="text-decoration: none;">2.释义</a></td>
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#7" style="text-decoration: none;">7.意义</a></td>
</tr>
<tr height="50px">
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#3" style="text-decoration: none;">3.系统技术特点</a></td>
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#8" style="text-decoration: none;">8.作用</a></td>
</tr>
<tr height="50px">
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#4" style="text-decoration: none;">4.应用领域</a></td>
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#9" style="text-decoration: none;">9.发展趋势</a></td>
</tr>
<tr height="50px">
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#5" style="text-decoration: none;">5.解决方案</a></td>
<td><a href="https://baike.baidu.com/item/%E6%99%BA%E6%85%A7%E5%86%9C%E4%B8%9A/726492#10" style="text-decoration: none;">10.如何改变</a></td>
</tr>
</table>
</div>
<hr class="style-one"/>
<br/>
<hr class="style-two"/>
<div id="last" style="text-align: center;">
<div class="c" style="background-color: #0BC5DE; float: left; height: 150px; color: white;">
<br>
<dl style="text-align: left;">
<dt>
<dd>主管：中华人民共和国农业农村部</dd>
</dt>
<dt>
<dd>主办：河北农业大学</dd>
</dt>
<dt>
<dd>负责人：信息学院大数据1904班王欣雨</dd>
</dt>
<dt>
<dd>冀 版权所有 © 2021 《智慧农业（河北农业大学)》</dd>
</dt>
</dl>
</div>
<div class="c" style="background-color: #0BC5DE; float: left; height: 150px; color: white;">
<br>
<dl style="text-align: left;">
<dt>
<dd>地址：河北省保定市灵雨寺街289号</dd>
</dt>
<dt>
<dd>邮编：071001</dd>
</dt>
<dt>
<dd>电话：0312 752 8888</dd>
</dt>
<dt>
<dd>E-mail：zhaoban@hebau.edu.cn</dd>
</dt>
</dl>
</div>
<div class="c" style="background-color: #0BC5DE; float: left; height: 150px; color: white;">
<img src="images/联系1.jpg" width="120px" height="120px"/ >
<img src="images/联系2.jpg" width="120px" height="120px"/>
<p>您可以通过以上方式联系我们！</p>
</div>
</div>
</div>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或