作业要求：做一个帧动画：
1、看看最终的样子：
Erik笑容的动画
2、图片地址（图片切成17张）：
http://ife.baidu.com/2016/static/img/erik_ce204002.jpg
3、注意：不要使用 CSS animation，因为这里要学习的是使用 JS 来操作 CSS，而不是为了完成这个任务。
不多说了，先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Erik的微笑</title>
<style>
.boos {
position: relative;
background-image: url(timg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 1000px;
z-index: 0;
}
#parent {
position: absolute;
width: 100%;
height: 482px;
margin: 200px 0;
background: white;
}
.p1 {
font-size: 42px;
position: absolute;
top: 70px;
left: 50px;
width: 300px;
}
.p2 {
font-size: 20px;
position: absolute;
top: 220px;
left: 50px;
width: 280px;
}
#child {
width: 480px;
float: right;
}
</style>
</head>
<body>
<div class="boos">
<div id="parent">
<p class="p1">纸上得来终觉浅
绝知此事要躬行</p>
<p class="p2">我们精心设计了许多编码任务
让你可以循序渐进、由浅入深
地在实践中掌握技术</p>
<div id="child"><img id="img" src="sr/img/1.gif" alt=""></div>
</div>
</div>
<script>
window.onload = function() {
//先获取元素给变量img
var img = document.querySelector('img');
//定时器：130毫秒调用方法a
setInterval(a, 130);
function a() {
//自己只想到了switch循环，根据上一张图片，来找到下一张图片，以此达到图片连续的目的
//img.getAttribute('src')，获取img的src属性值，然后case做对照，替换src的属性值
switch(img.getAttribute('src')) {
case 'sr/img/1.gif':
img.setAttribute('src', 'sr/img/2.gif');
break;
case 'sr/img/2.gif':
img.setAttribute('src', 'sr/img/3.gif');
break;
case 'sr/img/3.gif':
img.setAttribute('src', 'sr/img/4.gif');
break;
case 'sr/img/4.gif':
img.setAttribute('src', 'sr/img/5.gif');
break;
case 'sr/img/5.gif':
img.setAttribute('src', 'sr/img/6.gif');
break;
case 'sr/img/6.gif':
img.setAttribute('src', 'sr/img/7.gif');
break;
case 'sr/img/7.gif':
img.setAttribute('src', 'sr/img/8.gif');
break;
case 'sr/img/8.gif':
img.setAttribute('src', 'sr/img/9.gif');
break;
case 'sr/img/9.gif':
img.setAttribute('src', 'sr/img/10.gif');
break;
case 'sr/img/10.gif':
img.setAttribute('src', 'sr/img/11.gif');
break;
case 'sr/img/11.gif':
img.setAttribute('src', 'sr/img/12.gif');
break;
case 'sr/img/12.gif':
img.setAttribute('src', 'sr/img/13.gif');
break;
case 'sr/img/13.gif':
img.setAttribute('src', 'sr/img/14.gif');
break;
case 'sr/img/14.gif':
img.setAttribute('src', 'sr/img/15.gif');
break;
case 'sr/img/15.gif':
img.setAttribute('src', 'sr/img/16.gif');
break;
case 'sr/img/16.gif':
img.setAttribute('src', 'sr/img/17.gif');
break;
case 'sr/img/17.gif':
img.setAttribute('src', 'sr/img/1.gif');
break;
}
}
}
</script>
</body>
</html>
感觉很笨。
都是作业的锅
版权声明：本文为qq_45358338原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。