汤姆猫游戏demo
emm这里没有上传相关图片及资源，只有html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 汤姆猫游戏
1、屏幕支持动画播放
2、图片资源
3、播放器：通过点击触发，播放动画-->
<img id="cat" src="img/Animations/angry/angry_00.jpg"/>
<!-- 点击button -->
<div id="scratch"></div>
<div id="stomach"></div>
</body>
<style>
*{
margin:0px;
padding:0px;
}
#cat{
width:100%;
height:100%;
}
/*多选择器语法：#id,#id.....*/
#scratch,#stomach{
/* background: blueviolet;*/
}
#scratch{/*依照自己的屏幕分辨率进行设置*/
width:300px;
height:100px;
/* 定位属性：1、固定定位 fixed ：针对窗口定位位置，不会受到滚动条的影响
2、绝对定位（优先）：针对于父级标签定位位置，父级要有定位属性
3、相对定位：针对于原本自己所在的位置定位
*/
position:absolute;
bottom:700px;
left:350px;
}
#stomach{
width:300px;
height:250px;
position:absolute;
bottom:400px;
left:350px;
//border-radius:50%;
}
</style>
<!-- javaScript运行在网页上的脚本-->
<script>
//6、增加点击事件 onclick=function
document.getElementById("stomach").onclick = function () {
StartAnim("stomach", 33);
}
document.getElementById("scratch").onclick = function () {
StartAnim("scratch",55);
}
var time=null;
//1、声明函数：播放动画，StartAnim()
function StartAnim(path,count) {
//关闭计时器
clearInterval(time);
var index=0;
//1、动态替换img标签的src属性
//document对象：文档键树对象，包含了获取、设置、删除标签的函数
var cat = document.getElementById("cat");
//2、实现 自动轮播图片:间隔时间
//setInterval:设置计时器，根据指定间隔时间执行代码块
time = setInterval(function () {
setInterval(function () {
//4、设置index<10 拼接“0”，超出图片范围，关闭计时器
if(++index<count){
if(++index<10) {
index = "0" + index;
}
//3、设置img标签的src属性
cat.src="img/Animations/"+path+"/"+path+"_"+index+".jpg";
}else{
clearInterval(time);
}
},200);
})
}
</script>
</html>
6899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
