<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#walkMan {
width: 63px;
height: 75px;
position: absolute;
}
#walk1 {
position: absolute;
}
#showCountry {
position: absolute;display: none;
width: 200px;height: 100px;
border: 1px solid red;
background-color: blue;color: white;
}
</style>
<script>
var list = {
'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和A片'],
'hg': ['韩国', '首尔', '无穷', '民族意识超强']
};
var index = 1;
var length = 0;
var height = 0;
var b = true;
var tem = 1;
var temp = 1;
onload = function() {
setInterval(birdFly1,100);
setInterval(manRun,100);
setInterval(walkMouse, 100)
manRunAround();
mouseMove();
getImgMsg();
};
function getImgMsg() {
//获取所有图片
var imgs = document.getElementsByTagName('img');
//为每个图片指定指向、移开事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function(e) {//指向国旗显示国家信息
//获取国家信息
var msg = list[this.id];
//构造描述字符串
var msgStr = '国家：' + msg[0] + '<br>首都：' + msg[1] + '<br>国花：' + msg[2] + '<br>描述：' + msg[3];
//获取div
var showCountry = document.getElementById('showCountry');
//显示div
showCountry.style.display = 'block';
//设置描述信息
showCountry.innerHTML = msgStr;
//让div在鼠标的位置显示
showCountry.style.left = e.clientX + 'px';
showCountry.style.top = e.clientY + 'px';
};
imgs[i].onmouseout = function() {//移开国旗隐藏显示
//获取div
var showCountry = document.getElementById('showCountry');
showCountry.style.display = 'none';
};
}
}
function manRunAround() {
//根据标签获取body元素
var body = document.getElementsByTagName('body')[0];
//规定初始值
var width = 500, height = 500, left = 10, top = 10;
//循环创建div
while (true) {
//创建div加入body中
var div1 = document.createElement('div');
div1.style.position = 'absolute';
div1.style.left = left + 'px';
div1.style.top = top + 'px';
div1.style.border = '1px solid red';
div1.style.width = width + 'px';
div1.style.height = height + 'px';
body.appendChild(div1);
//改写数值
left += 5;
top += 5;
width -= 10;
height -= 10;
//当div的宽度<=0时，在页面上不会显示，所以退出循环
if (width <= 0) {
break;
}
}
}
function mouseMove() {
window.onmousemove = function(e) {
var walk1 = document.getElementById('walk1');
walk1.style.left = e.clientX - 31 + 'px';
walk1.style.top = e.clientY - 37 + 'px';
}
}
//鼠标的小人移动的动画
function walkMouse() {
var walk1 = document.getElementById('walk1');
walk1.src = 'images/walk' + tem + '.png';
tem++;
if(tem > 7) {
tem = 1;
}
}
//更换图片
function manRun() {
var walkMan = document.getElementById('walkMan');
walkMan.src = 'images/walk' + index + '.png';
index++;
if (index > 7) {
index = 1;
}
manMove();
}
function manMove() {
//让野人跑起来
if(b) {
length += 10;
} else {
length -= 10;
}
if (length >= 500 - walkMan.width) {
height += 10;
length = 500 - walkMan.width;
if (height >= 500 - walkMan.height) {
height = 500 - walkMan.height;
b = false;
}
}
if (length <= 0) {
length = 0;
height -= 10;
if (height < 0) {
heigt = 0;
b = true;
}
}
walkMan.style.left = length + 'px';
walkMan.style.top = height + 'px';
}
function birdFly1() {
//计算当前图片的编号
temp++;
if (temp > 4) {
temp = 1;//因为只有4张图片，所以大于4时回到1
}
//找到小鸟的图片对象
var birdFly = document.getElementById('birdFly');
//设置图片
birdFly.src = 'images/bird'+temp+'.png';
}
</script>
</head>
<body>
<img src="images/walk1.png" id="walk1">
<img src="images/bird1.png" id="birdFly" style="position: absolute; left:227px; top:230px;"/>
<img src="images/walk1.png" id="walkMan"/>
<!--单独显示国家信息，单独一个文件，获得tagname会获得上面的信息-->
<img id="zg" title="abc" src="images/zg.jpg" width="100" height="100" />
<img id="mg" src="images/mg.jpg" width="100" height="100" />
<img id="rb" src="images/rb.jpg" width="100" height="100" />
<img id="hg" src="images/hg.jpg" width="100" height="100" />
<div id="showCountry"></div>
</body>
</html>
