会走的马里奥

最新推荐文章于 2024-08-01 08:40:32 发布

野蛮生长001

最新推荐文章于 2024-08-01 08:40:32 发布

阅读量204

点赞数

分类专栏： angular js 文章标签： angular js

本文链接：https://blog.csdn.net/qq_39125684/article/details/79832112

版权

angular js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="angular-1.6.8/angular.js"></script>
<style>
#box{
	position:absolute;
	width:32px;
	height:40px;
	background:url(img/gx.jpg);
	background-position:64px 0px;	
	}
#btn{
	text-align:center;
	margin-top:80px;
	}	
</style>
<body ng-app="myApp" ng-controller="myContr">
<div style="position:relative">
	<div id="box">
    
    </div>
</div>
<div>
	<input id="btn" type="button" value="开始动画" onClick="moveBox()"/>
</div>

<script>
var box = document.getElementById("box");
var state = 0;
box.style.left = "0px";
box.style.top = "0px";

var moveBox = function(){
	state += 32;
	if(state == 96){
		state = 0;
		}
	box.style.backgroundPosition = state +"px "+"0px";	
	/*将左边的距离转换成int 类型赋给变量，方便下边的操作*/
	var moveNum = parseInt(box.style.left);
	
	moveNum += 5;
	if(moveNum < 1260){
		box.style.left = moveNum +"px";
		
		setTimeout("moveBox()",100);
		}
	}

</script>
</body>
</html>