<!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算法01 - 链表

    1.链表 在Java中实现链表,每个节点都有一个值,然后把它链接到下一个节点.下面来看一下节点的实现 class Node<E> { private E e; private Node&l ...

  2. Java——重写

    重写面向对象编程的三大特征之一 1.子类重写了父类的方法,则使用子类创建的对象调用该方法时,调用的是重写后的方法,即子类中的方法 2.子类重写父类方法需满足以下条件: (1)方法名和参数列表: 子类重 ...

  3. jquery.validate.js使用实例

    一.常用方式: $('form').validate({  rules: {},        messages: { },        submitHandler: function () {}) ...

  4. MySQL简单的查询语句

    1.查询特定列:select 列名 from 表名:(必须先进入数据库)或者 select 列名 from 数据库.表名: 2.查询多个列:select 列1,列2,... from 表名: 3.除去 ...

  5. 转载：入门Webpack，看这篇就够了

    写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...

  6. 在线jquery.min.js、vue.min.js引用

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...

  7. react-native-scrollable-tab-view 中嵌套了react-native-swiper产生的bug

    前段时间用RN的时候遇到过这个问题用scrollable-tab-view(scrollableView)这个组件然后嵌套轮播swiper会出现,在scrollableView  nitialPage ...

  8. this.$nextTick()作用

    当data中的某个属性改变的时候,这个值并不是立即渲染到页面上,而是先放到watcher队列上(异步),只有当前任务空闲的时候才会去执行watcher队列上的任务.所以导致,改变的数据挂载到dom上会 ...

  9. ubuntu 18.04启动samba图形管理界面

    启动samba图形界面管理器出现错误: Failed to load module "canberra-gtk-module" 或 SystemError: could not o ...

  10. js中bind的用法，及与call和apply的区别

    call和apply的使用和区别不再做阐述,可以参考我的另一篇随笔<JavaScript中call和apply方法的使用>(https://www.cnblogs.com/lcr-smg/ ...