<!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="data:images/walk1.png" id="walk1">
 <img src="data:images/bird1.png" id="birdFly" style="position: absolute; left:227px; top:230px;"/>
 <img src="data:images/walk1.png" id="walkMan"/>
 <!--单独显示国家信息，单独一个文件，获得tagname会获得上面的信息-->
 <img id="zg" title="abc" src="data:images/zg.jpg" width="100" height="100" />
    <img id="mg" src="data:images/mg.jpg" width="100" height="100" />
    <img id="rb" src="data:images/rb.jpg" width="100" height="100" />
    <img id="hg" src="data:images/hg.jpg" width="100" height="100" />
    <div id="showCountry"></div>
</body>
</html>

关于JS的一些案例，setInterval，动态图片的更多相关文章

  1. 简单的Django向HTML展示动态图片 案例——小白

    目标:通过Django向HTML传送图片展示 我的天哪,真是膈应人,网上的案例都不适合我,感觉所有的解决办法在我这里都不行. 好吧~ 是我菜,看不懂人家的代码,那句话叫啥来着?一本好经被傻和尚念歪了. ...

  2. 超酷动态图片展示墙JS特效制作方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

    atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...

  4. HTML中动态图片切换JQuery实现

    相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...

  5. ThinkPHP中关于JS文件如何添加类似__PUBLIC__图片路径

    在对html样式进行优化的时候,经常会用到Js/jquery进行一些跳转切换的样式,而我们常做的就是在Js/jquery代码中嵌url图片链接代码,以实现动态交互的页面效果. 如下图所示:

  6. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  8. JS 百度地图路书---动态路线

    JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...

  9. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  10. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

随机推荐

  1. 单链表数据结构 - java简单实现

    链表中最简单的一种是单向链表,每个元素包含两个域,值域和指针域,我们把这样的元素称之为节点.每个节点的指针域内有一个指针,指向下一个节点,而最后一个节点则指向一个空值.如图就是一个单向链表 一个单向链 ...

  2. [SCOI2003]字符串折叠

    一道蛮好玩的区间DP...其实只要做好check...然后统计答案就好了...QAQ... 呆码: #include<iostream> #include<cstdio> #i ...

  3. ecplise中设置字体大小和背景

    1 将ecplise中的代码背景设置为豆沙色 2 设置ecplise中的字体大小

  4. Apache配置对外访问默认路径（域名默认访问路径）

    摘抄.同以下博主遇到同样问题,故此记录. 作者:ChasingdreamLY 原文:https://blog.csdn.net/qq_26591517/article/details/80414073 ...

  5. APICloud-数据存储

    APICloud 共有四种数据存储 1.file:目录操作,文件操作 文件存储方式,用于图片.文档的上传.下载.删除.管理. 2.db:本地 sqlite 数据库 用于离散数据的存储. 3.loacl ...

  6. FireFox 插件xpi文件签名2

    上一篇https://www.cnblogs.com/nightnine/p/6140676.html 提交到官方网站上的签名,官方已经拒绝了 于是手动自己签名 官方文档:https://develo ...

  7. my first homepage

    <!DOCTYPE html><html><head><style type="text/css">p{ text-indent:2 ...

  8. linux中tar及压缩解压命令用法

    把常用的tar解压命令总结下,当作备忘: tar 命令可以为Linux的文件和目录创建档案.利用 tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向 档案中加入新的文件.t ...

  9. idea 引入web、配制tomcat

    引入web包: https://www.cnblogs.com/chenloveslife/p/8973912.html 配置tomcat:https://blog.csdn.net/qq_33257 ...

  10. Python帮助

    我们可以很容易的通过Python解释器获取帮助.如果想知道一个对象(object)更多的信息,那么可以调用help(object)!另外还有一些有用的方法,dir(object)会显示该对象的大部分相 ...