038--Hbuilder--js--浩克游戏—浩克行走

最新推荐文章于 2024-05-15 11:32:54 发布

做梦吃星星

最新推荐文章于 2024-05-15 11:32:54 发布

阅读量250

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45515187/article/details/109295160

版权

CSS动画背景平移 JavaScript事件 HTML元素样式控制

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" href="//www.baidu.com/favicon.ico" type="image/x-icon"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				position: relative;
				width: 32px;
				height: 48px;
				background: url(img/00.png);
				background-position:0px -96px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
<script type="text/javascript">
	var div = document.querySelector("div");
	var x = 0;
	var l = 0;
	var ismove = false;
	setInterval(function(){
		if(ismove) return;
		x++;
		l += 10;
		if(x>3) x=0;
		div.style.backgroundPosition = - x * 32 + "px -96px";
		div.style.left = l + "px";
	},150);
	div.onclick = function(){
		ismove = !ismove;
	}
</script>