关于JS的一些案例，setInterval，动态图片
<!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，动态图片的更多相关文章
- 简单的Django向HTML展示动态图片 案例——小白
目标:通过Django向HTML传送图片展示 我的天哪,真是膈应人,网上的案例都不适合我,感觉所有的解决办法在我这里都不行. 好吧~ 是我菜,看不懂人家的代码,那句话叫啥来着?一本好经被傻和尚念歪了. ...
- 超酷动态图片展示墙JS特效制作方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 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. 不要 ...
- HTML中动态图片切换JQuery实现
相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...
- ThinkPHP中关于JS文件如何添加类似__PUBLIC__图片路径
在对html样式进行优化的时候,经常会用到Js/jquery进行一些跳转切换的样式,而我们常做的就是在Js/jquery代码中嵌url图片链接代码,以实现动态交互的页面效果. 如下图所示:
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）
模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...
- JS 百度地图路书---动态路线
JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例：右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
随机推荐
- eclipse 打开时一闪而过解决办法
编辑文件:eclipse.ini,在 -vmargs 上一行添加: -vmC:/Program Files/Java/jdk1.8.0_131/jre/bin “C:/Program Files/Ja ...
- python3.6 连接mysql数据库问题
最近有个项目欲安装MySQL-python/1.2.5一直失败. 环境: win7 python3.6.2 报错信息如下: Creating library build\temp.win32-3.6\ ...
- admin 自定义字段颜色 并加以简单判断
在model中class Books(models.Model): nid = models.AutoField(primary_key=True, ) title = models.CharFiel ...
- python单列模式
单例模式:就是永远用一个对象的实例 初级版 #初级版 class Foo(object): instance=None def __init__(self): pass @classmethod # ...
- C语言求1-1/3+1/5-1/7+...——小程序，大道理
问题:用C语言编写程序求1-1/3+1/5-1/7+... 示例: #include <stdio.h> void main(){ ; ,a=; ){ sum=sum+n/a; n=-n; ...
- Arm11-mini6410入坑
Mini6410 学习Stm32的时候原子哥的资料真全啊,而且原子哥在他论坛也解答问题.然而现在学习ARM买了一套友善之臂的开发板,官方的资料只能刚好入门而已,其实入门都算不上.看了一下,网上的资料很 ...
- JAVA005-基本数据类型变量的存储
1.变量按类型分: 数据类型分为基本数据类型和引用数据类型 引用数据类型包括数组和类等 类定义的变量又叫对象 2.按照作用范围分为: 类级别.对象实例级.方法级.块级 方法级:局部变量 3.字符型的字 ...
- Python高阶函数和匿名函数
高阶函数:就是把函数当成参数传递的一种函数:例如 注解: 1.调用add函数,分别执行abs(-8)和abs(11),分别计算出他们的值 2.最后在做和运算 map()函数 python内置的一个高阶 ...
- WPF-在Grid中编程添加控件
摘要: 在Grid中编程添加控件,布局控件的位置用到的代码是: gridLayout.Children.Add(textblock); Grid.SetRow(textblock, ); Grid.S ...
- IDEA Maven的下载和配置
首先去官网下载如图: 下载之后解压打开如图: 配置:1.打开conf文件夹下的settings.xml(我用的notepad++) 第55行左右加上图上的<localRepository> ...