关于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 ...
随机推荐
- ts文件分析(纯c解析代码)
参考链接: 1. MPEG-2 TS码流分析 https://blog.csdn.net/zhubin215130/article/details/8958567 TS Header PAT PMT ...
- PLC之六部十层电梯整体框架
1.基本框架 此图基于西门子杯逻辑控制赛项中电梯题目的变量表以及功能设计 1.I/O输入是指变量表中的input数字量,包括电梯所有的内呼按钮.外呼按钮.电梯平层开关等 2.逻辑处理是指根据相对应的输 ...
- Java的数组，集合，数据结构，算法（一）
本人的愚见,博客是自己积累对外的输出,在学习初期或自己没有多少底料的情况下,与其总结写博客不如默默去搞自己的代码,但是学到集合这一块时,数组,集合,数据结构,算法这个概念搞的我比较混淆,所以不得已写这 ...
- python列表的学习笔记
列表的操作 第一个例子: #names = "zhangyang guyun xiangpeng xuliangchen" #通过空格或逗号存变量 names = [" ...
- Echarts扩展地图文字位置错乱的问题
最近在弄echarts 因为要用到扩展地图,所以在官网下载了相应的json文件 ,引入之后发现文字位置错乱 于是查找网上资料 发现 textFixed : { ...
- 视觉显著性简介 Saliency Detection
内容转移到博客文章系列:显著性检测 1.简介 视觉显著性包括从下而上和从上往下两种机制.从下而上也可以认为是数据驱动,即图像本身对人的吸引,从上而下则是在人意识控制下对图像进行注意.科研主要做的是从下 ...
- websocket的属性readyState
webSocket的readyState属性用来定义连接状态,该属性的值有下面几种: 0 :对应常量CONNECTING (numeric value 0), 正在建立连接连接,还没有完成.The c ...
- Hyperledger Fabric-CA学习
Hyperleder Fabric系统架构核心逻辑包括MemberShip.Blockchain和Chaincode 其中上述3个核心逻辑中,Membership服务用来管理节点身份.隐私.confi ...
- 使用Babel将单独的js文件 中的 ES6转码为ES5
如果你并没有接触过ES6,当你看到下面的代码时,肯定是有点懵逼的(这是什么鬼?心中一万头神兽奔腾而过),但是你没看错,这就是ES6.不管你看不看它,它都在这里. 1 2 3 4 5 6 7 8 9 ...
- vue将网页中的特定部分转成pdf并下载（仅供个人学习记录）
先安装支持 将页面html转换成图片npm install --save html2canvas 将图片生成pdfnpm install jspdf --save 组件引用: import html2 ...