<!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. Quartz定时任务封装

    一般的系统都会有一些定时任务,那么我们将这个定时任务封装起来,只要系统需要添加定时任务时,只需调用此方法传入所需要的值即可完成定时任务.  自己自学整理的一些随笔 1.首先对周期粒度进行封装 publ ...

  2. DevExpress WinForms使用教程：皮肤颜色和LookAndFeel

    [DevExpress WinForms v18.2下载] v18.2版本中更改了控制背景颜色和皮肤一起处理的方式.在v18.1中引入了Project Settings页面,其中包含一个skin se ...

  3. ubuntu Error fetching https://gems.ruby-china.org/: Errno::ECONNREFUSED: Connection refused

    排除网络原因的前提下 是 权限问题  用 sudo 来 执行命令即可  sudo  gem sources -a https://gems.ruby-china.org/

  4. elasticsearch(6) 映射和分析

    类似关系型数据库中每个字段都有对应的数据类型,例如nvarchar.int.date等等,elasticsearch也会将文档中的字段映射成对应的数据类型,这一映射可以使ES自动生成的,也是可以由我们 ...

  5. Python第八章（北理国家精品课 嵩天等）

    程序设计方法 8.1体育竞技分析实例 from random import random def printIntro(): print("这个程序模拟两个选手A和B的某种竞技比赛" ...

  6. python爬虫基础_requests和bs4

    这些都是笔记,还缺少详细整理,后续会更新. 下面这种方式,属于入门阶段,手动成分比较多. 首先安装必要组件: pip3 install requests pip3 install beautifuls ...

  7. 以编程方式使用 Microsoft Office Visio 2003 ActiveX 控件

    以编程方式使用 Microsoft Office Visio 2003 ActiveX 控件 2007/10/29 Mark BukovecEmpire Down Development 适用于:Mi ...

  8. matlab绘图与可视化

    1.设置图形对象属性值 set(h,'属性名称','属性值') >> subplot(,,); h1=line([ ],[ ]); text(,0.5,'unchange'); subpl ...

  9. js实现全选反选（开关门）

    话不多说直接看图吧

  10. PostgreSQL注入基础

    一般注入多用于在mssql和mysql两类数据库中,如mssql+asp.mysql+php则是最为常见的搭配环境.不同的网站应用的数据库也大不一样,根据数据库的处理能力.负载等多重因素决定.本文主要 ...