韩顺平 javascript教学视频_学习笔记31_随意拖拽窗口案例_dom对象（style对象）_坦克大战1.0版

来源：互联网发布：benet 大型网络编辑：程序博客网时间：2024/05/17 03:11

先来做一个随意拖拽窗口的案例：

代码：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>拖动浮动窗口</title><script language="javascript">  var x=0;y=0;x1=0;y1=0;var moveable=false;var index=20000;//开始拖动function startDarg(obj,evt){var e = evt?evt:window.event;if(!window.captureEvents){obj.setCapture();}else{window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);} var win = obj.parentNode; //取得父窗口（就是该div的上一级div）win.style.zIndex=++index; //设置父窗口的z轴值,这里容易出错，是zIndex 不是 z-indexx=e.clientX;  //取得当前鼠标的x坐标y=e.clientY;  //取得当前鼠标的y坐标x1=parseInt(win.style.left); // 将父窗口的距浏览器左边界的距离转换成number // 这里不用将style.left 上的 px 去掉，直接解析出来就是一个numbery1=parseInt(win.style.top);  // 将父窗口的距浏览器上边界的距离转换成numbermoveable = true;}function drag(obj,evt){var e = evt?evt:window.event;if(moveable){ var win=obj.parentNode;win.style.left = x1 + e.clientX - x +"px";  //这里也最容易出错，这里必须加上 px ; 不加px的话是没有反应的win.style.top = y1 + e.clientY - y +"px"; //这里也最容易出错，这里必须加上 px ; 不加px的话是没有反应的}}function stopDrag(obj){if(moveable){if(!window.captureEvents){obj.releaseCapture();}else {window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);}moveable = false;}}</script></head><body ><div id="l1"style="position:absolute;  width:200px;  height:200px; background-color:#99ccff;z-index:200; top:100px; left:154px;"><div id="title"     onMouseDown="startDarg(this,event)" onMouseMove="drag(this,event)"onMouseUp="stopDrag(this)"style="width:200px; height:20px; background-color:#330033; top:0px; left:0px;z-index:200; position:absolute; font-size:9pt; color:#ffffff; padding-top:5px;padding-left:5px; cursor:hand">浮动窗口</div>实例 </div></body></html>

dom编程详解----style对象

style对象的属性：

下面我们来看一下style对象常用的函数和属性

先来看一个坦克转向的小案例：

素材：

注意我用的素材的分辨率为：34*140 的，所以程序中是我的分辨率来的

坦克转向是通过一张背景图片实现的，不是通过四张图片来实现的

通过四张图片来实现也可以，但是效率很低，还需要向服务器发送请求，加载图片等操作，所以不是很好

一次加载一个背景图，通过显示该背景图的不同部分，来实现转向的效果

先讲一下 background-position-y这个属性的意思：

明白了background-position-y这个属性的意思，做坦克转向就容易多了

<html><head><script language="javascript">   function change(obj){//注意：在js中引用属性的时候不能写-，即不能写成background-position-y，必须写成下面的形式//必须写成这样的形式： backgroundPositionYif(obj.value=="上"){tanke.style.backgroundPositionY="0px";}else if(obj.value=="右"){tanke.style.backgroundPositionY="105px";}else if(obj.value=="下"){tanke.style.backgroundPositionY="70px";}else if(obj.value=="左"){tanke.style.backgroundPositionY="35px";}}</script></head><body><div id="tanke" style="background-position-y:-35px; background-image:url('坦克.png'); width:34px; height:35px"></div><input type="button" value="上" onclick="change(this)"/><input type="button" value="右" onclick="change(this)"/><input type="button" value="下" onclick="change(this)"/><input type="button" value="左" onclick="change(this)"/> </body></html>

下面来实现让坦克能够上下左右移动：

<html><head></head><body onkeydown="hero.move(event)"><div id="filed" style="background-color:black; width:500px; height:400px; position:absolute;"><div id="mytank" style="background-position-y:-35px; background-image:url('坦克.png'); width:34px; height:35px; position:absolute;"></div><script language="javascript">   //用面向对象的方法开发，web版本的坦克大战1.0（用wasd控制）function MyTank(x,y,direct){this.x=x; //横坐标this.y=y;this.direct=direct;  //方向this.speed=3; //速度//初始化mytank.style.left=this.x+"px";mytank.style.top=this.y+"px";mytank.style.backgroundPositionY=direct+"px";//event表示按键事件this.move=function move(event){//window.alert(event.keyCode);//可以测试键盘按键返回的 keyCode 是多少//a 左 3，s 下 2，d 右 1，w 上 0//添加方向键：上 38; 左 37; 下 40; 右 39;switch(event.keyCode){case 65: //a 向左 3case 37:this.x-=this.speed;this.direct=3;mytank.style.backgroundPositionY="35px";break;case 83: //s 向下 2case 40:this.y+=this.speed;this.direct=2;mytank.style.backgroundPositionY="70px";break;case 68: //d 向右 1case 39:this.x+=this.speed;this.direct=1;mytank.style.backgroundPositionY="105px";break;case 87: //w 向上 0case 38:this.y-=this.speed;this.direct=0;mytank.style.backgroundPositionY="0px";break;}//统一改变位置mytank.style.left=this.x+"px";mytank.style.top=this.y+"px";}}//创建坦克var hero=new MyTank(200,365,0);function move(obj){//注意：在js中引用属性的时候不能写-，即不能写成background-position-y，必须写成下面的形式//必须写成这样的形式： backgroundPositionYif(obj.value=="上"){hero.y-=hero.speed;mytank.style.backgroundPositionY="0px";}else if(obj.value=="右"){hero.x+=hero.speed;mytank.style.backgroundPositionY="105px";}else if(obj.value=="下"){hero.y+=hero.speed;mytank.style.backgroundPositionY="70px";}else if(obj.value=="左"){hero.x-=hero.speed;mytank.style.backgroundPositionY="35px";}//统一改变位置mytank.style.left=hero.x+"px";mytank.style.top=hero.y+"px";}</script><br/><div style="top:410px; position:absolute;"><input type="button" value="上" onclick="move(this)" /><input type="button" value="右" onclick="move(this)" /><input type="button" value="下" onclick="move(this)" /><input type="button" value="左" onclick="move(this)" /></div></body></html>

0 0