<!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入门day04-方法简述

    方法: 是完成特定功能(一个)的代码集合,这些特定功能的代码可以被重复使用. 修饰符  方法返回值类型  方法名(形参列表){  方法体  }return 返回值: 形如: public static ...

  2. web前端框架之Vue hello world

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...

  3. HYPERSPACE

    Windows中,不管是应用程序还是内核程序,都不能直接访问物理内存,所有非IO指令都只能访问虚拟内存地址,如Mov eax, DWORD PTR[虚拟地址]形式,但是,有时候,我们明明已经知道了某个 ...

  4. java的main函数组成

    package test;/*public static void main(String[] args)主函数特殊之处:1.格式是固定的2.被jvm(虚拟机)所识别和调用 public:因为权限必须 ...

  5. Git通过密钥对远程仓库上传和更新详细操作

    1,先到ssh中ls查看之前本地生成的公钥和私钥,然后将别人的密钥替换掉自己的密钥,这里我把别人的密钥放在d:/desktop/id_rsa 中,利用cp /D/Desktop/id_rsa  id_ ...

  6. Shell test 命令

    Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于 ...

  7. 机器学习笔记（三）Logistic回归模型

    Logistic回归模型 1. 模型简介: 线性回归往往并不能很好地解决分类问题,所以我们引出Logistic回归算法,算法的输出值或者说预测值一直介于0和1,虽然算法的名字有“回归”二字,但实际上L ...

  8. jmeter的几种参数化使用方法

    场景:在进行jmeter的接口自动化测试脚本的编写中需要使用参数化,现将接触到的几种参数化方法整理如下: 第一种: 使用“用户自定义变量”的配置元件来进行变量定义 填入变量.值.和备注就可以在后续的接 ...

  9. 在Linux系统使用VMware安装虚拟机

    首先到VMware官网上www.vmware.com下载相应的版本 我这边用的是 VMware-Workstation-Full-12.5.0-4352439.x86_64.bundle 上传到Lin ...

  10. Python_在Ubuntu中搭建科学计算环境

    本文针对 Ubuntu 下搭建 Python 科学计算的环境,罗列了关键词和部分链接,最后附上了自己的一点分享. 1.升级 关键词: python ubuntu 升级 推荐: ubuntu16.04下 ...