<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script language="javascript" type="text/javascript">
var keydown=false;
//发送
function sendSer(value){
document.getElementById("ser").src="http://192.168.1.1/cgi-bin/web2ser?"+value;
}
//动作
function stopMoving(){
document.getElementById("middle_left_control_image_top_middle").style.backgroundImage="url(images/anniu_02_1.gif)";
document.getElementById("middle_left_control_image_middle_left").style.backgroundImage="url(images/anniu_04_1.gif)";
document.getElementById("middle_left_control_image_middle_right").style.backgroundImage="url(images/anniu_06_1.gif)";
document.getElementById("middle_left_control_image_bottom_middle").style.backgroundImage="url(images/anniu_08_1.gif)";
sendSer('A0');
}
function moveForward(){
document.getElementById("middle_left_control_image_top_middle").style.backgroundImage="url(images/anniu_02_2.gif)";
sendSer('A1');
}
function turnLeft(){
document.getElementById("middle_left_control_image_middle_left").style.backgroundImage="url(images/anniu_04_2.gif)";
sendSer('A2');
}
function moveBack(){
document.getElementById("middle_left_control_image_bottom_middle").style.backgroundImage="url(images/anniu_08_2.gif)";
sendSer('A3');
}
function turnRight(){
document.getElementById("middle_left_control_image_middle_right").style.backgroundImage="url(images/anniu_06_2.gif)";
sendSer('A4');
}
//按键按下
function checkKeyDown(evt) {
var evt = evt ? evt : (window.event ? window.event : null); //区分IE和FF来得到event
var code = evt.which ? evt.which :evt.keyCode; //区分IE和FF来得到 event.keyCode 或 event.which
//alert(code); 测试键码
if(!keydown){
if(code==87) //W
moveForward();
else if(code==65) //A
turnLeft();
else if(code==83) //S
moveBack();
else if(code==68) //D
turnRight();
else if(code==38) //up
SteeringGearUp();
else if(code==40) //down
SteeringGearDown();
keydown=true;
}
}
//按键松开
function checkKeyUp(evt) {
keydown=false;
var evt = evt ? evt : (window.event ? window.event : null);
var code = evt.which ? evt.which :evt.keyCode;
if(code==87 || code==65 || code==83 || code==68 || code==38 || code==40)
stopMoving();
}
//显示
function show(){
document.getElementById("videoFrame").src="http://192.168.1.1:8080/?action=stream";
document.getElementById("middle_left_control_image_top_middle").style.backgroundImage="url(images/anniu_02_1.gif)";
document.getElementById("middle_left_control_image_middle_left").style.backgroundImage="url(images/anniu_04_1.gif)";
document.getElementById("middle_left_control_image_middle_right").style.backgroundImage="url(images/anniu_06_1.gif)";
document.getElementById("middle_left_control_image_bottom_middle").style.backgroundImage="url(images/anniu_08_1.gif)";
document.getElementById("middle_middle_content_src_frame").style.visibility="visible";
}
</script>
</head>
<body onLoad="show()" onkeydown="checkKeyDown(event)" onkeyup="checkKeyUp(event)">
<img id="ser" width="1" height="1">
<center>
<div id="content">
<div id="header">
<div id="header_title">
<div id="header_title_left"></div>
<div id="header_title_content">
<div id="header_title_content_logo"></div>
</div>
<div id="header_title_right"></div>
</div>
</div>
<div id="middle">
<div id="middle_left">
<div id="middle_left_set"></div>
<div id="middle_left_control">
<div id="middle_left_control_image">
<div id="middle_left_control_image_top">
<div id="middle_left_control_image_top_left"></div>
<div id="middle_left_control_image_top_middle" style="cursor:pointer;" onMouseDown="moveForward();" onMouseUp="stopMoving();"><br/><br/><font style="font-size:20px;"><b>W</b></font></div>
<div id="middle_left_control_image_top_right"></div>
</div>
<div id="middle_left_control_image_middle">
<div id="middle_left_control_image_middle_left" style="cursor:pointer;" onMouseDown="turnLeft();" onMouseUp="stopMoving();"><br/><font style="font-size:20px; margin-right:-30px;"><b>A</b></font></div>
<div id="middle_left_control_image_middle_middle"></div>
<div id="middle_left_control_image_middle_right" style="cursor:pointer;" onMouseDown="turnRight();" onMouseUp="stopMoving();"><br/><font style="font-size:20px; margin-left:-30px;"><b>D</b></font></div>
</div>
<div id="middle_left_control_image_bottom">
<div id="middle_left_control_image_bottom_left"></div>
<div id="middle_left_control_image_bottom_middle" style="cursor:pointer;" onMouseDown="moveBack();" onMouseUp="stopMoving();"><font style="font-size:20px;"><b>S</b></font></div>
<div id="middle_left_control_image_bottom_right"></div>
</div>
</div>
</div>
</div>
<div id="middle_middle">
<div id="middle_middle_src">
<div id="middle_middle_content_src_frame">
<iframe id="videoFrame" style="background-image:url(images/middle5.jpg);" width="650px" height="494px" src=""></iframe>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</center>
</body>
</html>
WifiRobot_web.rar （21个子文件） 
WifiRobot_web css 
main.css 3KB images 
anniu_04_1.gif 3KB anniu_06_2.gif 3KB
title_fenge_01.jpg 1KB anniu_07.gif 504B anniu_09.gif 457B anniu_05.jpg 1KB title_fenge_03.jpg 1KB anniu_08_2.gif 3KB anniu_04_2.gif 3KB anniu_03.gif 552B anniu_06_1.gif 3KB anniu_02_2.gif 2KB anniu_08_1.gif 3KB image_back.jpg 15KB title_fenge_04.jpg 312B anniu_02_1.gif 2KB title_fenge_02.jpg 384B anniu_01.gif 475B image_logo.jpg 34KB
wifirobot.html 6KB资源评论
Qwejay2015-04-14不错 参考一下！！！
da1waiwai2016-05-19不错的东东，顶一个
