人物可以移動例項js--offset.top/left

瓜瓜東西發表於2014-08-14
JS
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素示例</title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
   
	function draw(id) {
		var canvas = document.getElementById(id);
		if (canvas == null)
			return false;
		var context = canvas.getContext('2d');
		context.fillStyle = "#EEEEFF"; //設定顏色
		context.fillRect(0, 0, 400, 300); //畫正方形
		context.fillStyle = "red"; //顏色
		context.strokeStyle = "blue"; //邊框顏色
		context.lineWidth = 1;//邊框線寬度
		context.fillRect(50, 50, 100, 100);
		context.strokeRect(50, 50, 100, 100);
		
		 var img = new Image();
		img.src="<%=request.getContextPath()%>/img/game/askway/a.jpg";
		context.drawImage(img,0,0); 
		
		setInterval(move,50);
	}
	 var j=1;
	 var z=1;
	function move()
	{
		$("#part3").css("background-position",-(120 * (j+1)+70*j)+"px "+-(93*z+100*z)+"px");
		j++;
		if(j==6){
			j=0;
			z++;
		}
		if(z==3){
			j=0;
			z=0;
		}
	}
	
	var i=50;
	function rehua(){
		setInterval(redraw,30);
	}
	function redraw(){
		//var context = $("#canvas").getContext("2d");
		var context = document.getElementById("canvas").getContext("2d");
		context.clearRect(0, 0, 400, 300);
		var img = new Image();
		img.src="<%=request.getContextPath()%>/img/game/askway/a.jpg";
		context.drawImage(img, i, i);
		i++;
	}
	
	function renrehua(){
		/* alert($("#part5").position().top);
		alert($("#part5").position().left);
		alert($("#part5").offset().left);
		alert($("#part5").offset().top); */
		setInterval(zoulu,100);
	}
	var k=1;
	var l = 0;
	function zoulu(){
		//alert($("#part5").css("left"));  //auto
		//alert($("#part5").offsetLeft);  //undifined
		
		$("#part5").css("background-position",-(35+k*70+60*k)+"px "+-(15+l*100+l*35)+"px");
		k++;
		if(k==4){
			k=0;
		}
		
		$("#part5").css("left",$("#part5").position().left+5);
		//alert($("#part5").position().left);
	}
</script>
<style type="text/css">
#part1 {
	border: solid 1px blue;
	width: 90px;
	height: 68px;
	background-image: url(<%=request.getContextPath()%>/img/game/askway/a.jpg);
	background-repeat: no-repeat;
	display: none;
}

#part2 {
	border: solid 1px blue;
	width: 90px;
	height: 68px;
	background-image: url(<%=request.getContextPath()%>/img/game/askway/a.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	display: none;
}

#part3 {
	border: solid 1px blue;
	width: 70px; /* 960  576  192 192*/
	height: 100px;
	background-image: url(<%=request.getContextPath()%>/img/game/askway/b.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: -120px -0px;
	/* background-position:10% 5%; */
}
#part4 {
	width:500px;
	height:400px;
	border:blue 1px solid;
	/* position:relative; */
}
#part5{
	position:absolute;
	width:70px;
	height:100px;
	background-image: url(<%=request.getContextPath()%>/img/game/askway/c.png);
	background-repeat: no-repeat;
	background-position: -35px -15px;
}

</style>
</head>
<body>
	<input type="button" onclick="draw('canvas');" value="移動">
	<input type="button" onclick="rehua();" value="持續移動">
	<input type="button" onclick="renrehua()" value="人物走動"/>
	<div id="part1"></div>
	<br>
	<div id="part2"></div>
	<br>
	<div id="part3"></div>
	<div id="part4">
		<div id="part5"></div>
	</div>
	<h1>canvas元素示例</h1>
	<canvas id="canvas" width="400" height="300" />
</body>
</html>

相關文章