人物可以移动实例js--offset.top/left

来源：互联网发布：网络文化建设的问题编辑：程序博客网时间：2024/04/28 04:11
<%@ 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>
0 0