验证中...
动态更改插入图片文件名实现动画效果 核心代码
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tom核心动画简单测试</title>
<style>
div{
width: 670px;
height: 1024px;
}
</style>
</head>
<body>
<div>
<img src="Resource/Animations/angry/angry_00.jpg" alt="">
</div>
</body>
<script>
let index = 1;
var run=true;
function play(){
if(run){
var div=document.getElementsByTagName("img");
if(index<10){
index="0"+index;
}
var img='Resource/Animations/angry/angry_'+index+'.jpg';//使用背景图片会发生闪烁,对于有规律的文件名可以使用文件名拼接循环
div[0].src=img;
index++;
console.log(img);
if(index>25){
index=0;
run=false;
}
}
}
setInterval(play,90);
</script>
</html>
QQ截图20190712091030.png
完整代码
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tom</title>
<style>
/* 第一个img标签 */
img:nth-child(1){
/* 图片只设置宽度或者高度,对等比例缩放不变形 */
width: 400px;
/* 光标样式默认箭头形状 */
cursor: default;
}
/* 单独设置第一张图片点击的时候不透明 */
img:nth-child(1):active{
opacity: 1;
}
/* 设置所有的图片:统一设置的宽度和单独设置的宽度会以单独设置的为准 */
img{
width: 80px;
/* 绝对定位 */
position: absolute;
/* 光标显示点击样式 */
cursor: pointer;
}
img:active{
/* 透明度,范围是[0,1] */
opacity: 0.7;
}
/* 第二个img标签 */
/* img:nth-child(2){
距离网页左边界20像素
left: 20px;
距离网页上边界300像素
top: 300px;
}
img:nth-child(3){
left: 20px;
top: 400px;
}
img:nth-child(4){
left: 20px;
top: 500px;
}
img:nth-child(5){
left: 320px;
top: 300px;
}
img:nth-child(6){
left: 320px;
top: 400px;
}
img:nth-child(7){
left: 320px;
top: 500px;
} */
#肚子{
width: 100px;
height: 150px;
/* background-color: red; */
position: absolute;
left: 155px;
top: 400px;
}
#头部{
width: 150px;
height: 150px;
position: absolute;
left: 135px;
top: 120px;
}
#尾巴{
width: 35px;
height: 90px;
position: absolute;
left: 280px;
top: 500px;
}
#左脚{
width: 50px;
height: 40px;
position: absolute;
left: 210px;
top: 580px;
}
#右脚{
width: 50px;
height: 40px;
position: absolute;
left: 150px;
top: 580px;
}
</style>
</head>
<body>
<img src="Resource/Animations/eat/eat_00.jpg" alt="">
<img src="Resource/Buttons/cymbal.png" alt="" onclick="play('cymbal', 12)">
<img src="Resource/Buttons/drink.png" alt="" onclick="play('drink',80)">
<img src="Resource/Buttons/eat.png" alt="" onclick="play('eat', 39)">
<img src="Resource/Buttons/fart.png" alt="" onclick="play('fart', 27)">
<img src="Resource/Buttons/pie.png" alt="" onclick="play('pie', 23)">
<img src="Resource/Buttons/scratch.png" alt="" onclick="play('scratch', 55)">
<div id="肚子" onclick="play('stomach', 33)"></div>
<div id="头部" onclick="play('knockout', 80)"></div>
<div id="尾巴" onclick="play('angry', 25)"></div>
<div id="左脚" onclick="play('foot_left', 29)"></div>
<div id="右脚" onclick="play('foot_right', 29)"></div>
<!-- <img src="" alt="" onclick="" play('cymbal',12)> ?????????-->
</body>
<script>
// 找到所有的img标签,7个img对应下标0-6 其中6个按钮对应的下标是1-6
var imgs = document.getElementsByTagName("img");
// 用循环来设置按钮图片的left和top坐标
for(var i = 1;i < 7; i++){
// i这个数字值对应了img集合中图片的下标
// 用i这个数字替代下标,把img图片取出来
var img = imgs[i];
// 设置图片的left和top坐标
// img.stlye.left = "20px";
// 六张图的left: 20 20 20 320 320 320
// 数字变量i值: 1 2 3 4 5 6
// i / 4 : 0.25 0.5 0.75 1 1.25 1.5
// i/4取整数位 : 0 0 0 1 1 1
// 然后 * 300 : 0 0 0 300 300 300
// 然后 + 20 : 20 20 20 320 320 320
// parseInt() 表示取整数,不是四舍五入,而是只保留整数位
img.style.left = parseInt(i / 4) * 300 + 20 + "px";
// img.stlye.top = "300px";
// 六张图top: 300 400 500 300 400 500
// 数字变量i的值:1 2 3 4 5 6
// i - 1 = : 0 1 2 3 4 5
// i对3取余数 : 0 1 2 0 1 2
// 再乘以100 : 0 100 200 0 100 200
// 再加300 :300 400 500 300 400 500
// % 取余数
img.style.top = (i - 1) % 3 * 100 + 300 + "px";
}
// 去除tom猫的图片标签
var tomImg = imgs[0];
// 定义变量表示当前是否正在做动作 false表示 否 true表示 是
var playing = false;
// Tom显示特定动作的函数,name表示动作图片名,number表示动作图片个说
function play(name,number){
if(playing == true){
// 判断如果正在做动作,不再向下执行,直接结束
return; //结束函数
}
// playing表示动作的执行状态,在动作开始时改成ture,结束时改成false
// 这里先以eat这个动作为例
console.log("执行吃的动作"); //日志打印,会显示在控制台
// 定义一个数字(计数器),记录图片个数
var count = 0;
playing = true; //动作开始
// 这个函数用于改变img的图片,实现动图效果
function eatShow(){
// 切换一张图片,计数器加1
count ++;
// 保留两位整数
if(count < 10){
count = "0" + count;
}
// 通过计数器拼接图片名,切换图片
tomImg.src = "Resource/Animations/"+ name +"/"+ name +"_"+ count +".jpg"
//计时器,在100毫秒之后调用eatShow这个函数本身
if(count < number){
setTimeout(eatShow, 100);
}else{
playing = false; // 动作结束
}
}
// 函数不会主动执行,需要调用
eatShow();
}
</script>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025