<!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. 转载， sublime text3 input函数无法执行问题解决方法

    一.安装插件SublimeREPL 按Ctrl+Shift+P,打开命令框.输入Install Package,回车,等待几秒钟,会弹窗提示“安装成功”.    按Ctrl+Shift+P,打开命令框 ...

  2. 6 python高级数据处理和可视化

    6.2. pyplot作图 1.折线图和散点图 t = np.arange(0,4,0.1) plt.plot(t,t,'o',t,t+2,t,t**2,'o') plt.show() 2.柱线图 p ...

  3. .net正则匹配

    char[] weixin = txtweixinhao.Text.Trim().ToCharArray(); for (int i = 0; i < weixin.Length; i++) i ...

  4. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  5. Alpha阶段敏捷冲刺总结

    项目感言 张艺琳 在这次冲刺中,我主要担任着PM的角色.不仅要梳理流程给小组每个成员进行分工,并且还要及时监督他们在要求时间内提交代码.同时我也参与到开发中去,与小组成员一起讨论数据库,最后一起设计出 ...

  6. ftp远端上的文件下载

    用linux下的wge下t载比在window下一个个点方便多了,命令如下: wget ftp:// 110.110.110/\*.mseed --ftp-user=username --ftp-pas ...

  7. 微信小程序 拖动图片一边进行截取

    简单实现一个画布截取图片的功能 原始图片超出指定尺寸,会进行隐藏,利用短边的宽度截取长边的宽度,拖动生成指定内容的图片 横图 竖图 var box_width = 600; //截取框尺寸 var b ...

  8. .Net Core+Angular6 学习 第二部分(创建Angular6项目)

    . 创建angular6 前提: 需要安装nodejs以及angular的脚手架,Angular官网要求Angular6.0必须在node 8.x 和 npm 5.x 以上的版本才能正常使用. 我的版 ...

  9. SqlServer 游标逐行更新数据，根据上一行的数据来更新当前行

    工作中用到的记录一下,游标的详细定义及说明请百度 --游标格式化数据 DECLARE cursor_jxsmb CURSOR FOR --定义一个游标 SELECT F0 FROM dbo.JXSMB ...

  10. B-食物链-经典并查集

    动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人用两种 ...