- 随意拖拽窗口的案例：
例如弹出的广告窗口挡住了内容，将它拖拽开
- 代码：
<!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-index
x=e.clientX; //取得当前鼠标的x坐标
y=e.clientY; //取得当前鼠标的y坐标
x1=parseInt(win.style.left); // 将父窗口的距浏览器左边界的距离转换成number
// 这里不用将style.left 上的 px 去掉，直接解析出来就是一个number
y1=parseInt(win.style.top); // 将父窗口的距浏览器上边界的距离转换成number
moveable = 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对象
- 不是只属于body的，是属于每个对象都有的
- 是style属性
- 属性也是对象
- 是属于stylesheet下面的一个单独的对象
- style对象的属性：
style属性有很多，具体可以查看帮助文档
- 案例-坦克转向
素材：
注意我用的素材的分辨率为 ：34*140 的，所以程序中是我的分辨率来的
- 坦克转向 是通过一张背景图片实现的，通过显示该背景图不同部分来实现专项的效果，不是通过四张图片来实现的
- 修改src,通过四张图片来实现也可以，但是效率很低，还需要向服务器发送请求，加载图片等操作，所以不是很好
一次加载一个背景图，通过显示该背景图的不同部分，来实现转向的效果
- background-position-y
先讲一下 background-position-y这个属性的意思：
- 这个属性可以让背景图片显示一部分
- 代表从哪个位置开始显示
- 坐标和我们想象的不太一样，背景图坐标是向上显示，但是图片显示仍然是向下的
- 背景图可以无限延伸，可以写来、200，还可以显示-40
明白了background-position-y这个属性的意思，做坦克转向 就容易多了
- 坦克转向
<html>
<head>
<script language="javascript">
function change(obj){
- 注意这里写成px
- 注意：在js中引用属性的时候不能写-，即不能写成background-position-y，必须写成下面的形式,下划线是禁用的
//必须写成这样的形式： backgroundPositionY
if(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可以加背景图片
<div id="tanke" style="background-position-y:-35px; background-image:url('坦克.png'); width:34px; height:35px"></div>
几个按钮
<input type="button" value="上" οnclick="change(this)"/>
<input type="button" value="右" οnclick="change(this)"/>
<input type="button" value="下" οnclick="change(this)"/>
<input type="button" value="左" οnclick="change(this)"/>
</body>
</html>
- 坦克移动
下面来实现 让坦克能够上下左右移动：
<html>
<head>
</head>
这块这样写，不太灵活，最好写成上面的方法
<body οnkeydοwn="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
添加方向键：是ascii编码上 38; 左 37; 下 40; 右 39;
不知道的可以去查询
switch(event.keyCode){
case 65: //a 向左 3
case 37:
this.x-=this.speed;
this.direct=3;
mytank.style.backgroundPositionY="35px";
break;
case 83: //s 向下 2
case 40:
this.y+=this.speed;
this.direct=2;
mytank.style.backgroundPositionY="70px";
break;
case 68: //d 向右 1
case 39:
this.x+=this.speed;
this.direct=1;
mytank.style.backgroundPositionY="105px";
break;
case 87: //w 向上 0
case 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，必须写成下面的形式
//必须写成这样的形式： backgroundPositionY
if(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="上" οnclick="move(this)" />
<input type="button" value="右" οnclick="move(this)" />
<input type="button" value="下" οnclick="move(this)" />
<input type="button" value="左" οnclick="move(this)" />
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
