人物可以移动实例js--offset.top/left
2014-08-14 12:10
260 查看
<%@ 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>
相关文章推荐
- JS中offsetTop、clientTop、scrollTop、offsetTop、style.left、styleTop各属性介绍
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- 获取offsetTop和offsetLeft值的js代码(兼容)
- input框 下面 紧跟着div弹出层,js取top left数值[实例]
- js中offsetLeft/offsetTop与jq中offset().left/offset().top的区别
- 获取offsetTop和offsetLeft值的js代码(兼容)
- js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解(转)
- 通过一个实例理解 offsetLeft,offsetTop; offsetWidth , offsetHeight
- JS属性 ClientTop,scrollTop,offsetWidth,ClientWidth,clientLeft,padding,border,top,margin区别
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- js的offsetLeft,scrollLeft,offsetTop,scrollTop等等的用法
- 【转】js中offsetLeft,offsetTop,offsetParent详解
- js中offsetLeft,offsetTop,offsetParent计算边距方法
- js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
- JS之 IE 奇葩的offsetTop和offsetLeft
- js获取鼠标点击位置(界面的位置,可以使用top和left直接定位的)
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
- js中top,left,height,width相关参数的解析和实例
- [转贴]Js中 关于top、clientTop、scrollTop、offsetTop等
- js之offsetLeft属性探讨