关于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 ...
随机推荐
- ubuntu 谷歌浏览器打开时需要输入密码来解锁密码环
问题: ubuntu14.04, 设置系统自动登陆账户,但每次开机打开 google chromium 浏览器,会要求输入一次密码,来解锁登录密钥环.很麻烦. 解锁登录密钥环:输入密码以解锁您的登录密 ...
- .net正则匹配
char[] weixin = txtweixinhao.Text.Trim().ToCharArray(); for (int i = 0; i < weixin.Length; i++) i ...
- pip install beautifulsoup4.失败
在学习python爬虫时,用到bs4解析网页,开始遇到安装bs出错 Collecting beautifulsoup4Exception:Traceback (most recent call las ...
- JS一些简单的问题
冒泡排序1 <script> //冒泡排序:把一组数据按照从大到小,或者从小到大的进行一定的排序 //从小到大排序 var num=[10,2,58,3,56,4,12]; //比较轮数 ...
- JAVAEE 第六周
JSF 生命周期: FacesServlet 充当用户和 JSF 应用程序之间的纽带.它在明确限定的 JSF 生命周期(规定了用户请求之间的整个事件流)的范围内工作. 1． 当JSF页面上的一个事 ...
- Python字典的使用与处理
在Python中,字典{dict}是比较常用的一个数据类型,使用键-值(key-value)存储 与列表[list]相比,字典具有极快的查找和插入速度,不会随着key-value的增加而变慢,但是相应 ...
- vue实现pc端上拉加载功能，不兼容移动端
所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...
- web前端之Javascript---function函数
---恢复内容开始--- js 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的. 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部 ...
- C#中委托的同步和异步有什么区别
通过定义委托,来实现同步和异步,委托通过Action和Func来实现,记录学习委托的同步和异步的过程 委托的同步方法 委托的Invoke方法用来进行同步调用. static void Main(str ...
- node.js 之 N-blog
N-blog 使用 Express + MongoDB 搭建多人博客 原文地址: https://github.com/nswbmw/N-blog 建议初学者,研究下整个项目. 这里节选了一些内容为 ...