html自定义按钮语法,用仿ActionScript的语法来编写html5——第七篇，自定义按钮

第七篇，自定义按钮

这次弄个简单点的，自定义按钮。

其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。

下面是添加按钮的代码，

functiongameInit(event){

backLayer= newLSprite();

addChild(backLayer);

btn01= new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));

btn01.x= 76;

btn01.y= 50;

backLayer.addChild(btn01);

btn02= new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));

btn02.x= 76;

btn02.y= 100;

backLayer.addChild(btn02);

btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);

btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);

}functiononmousedown01(event){

alert("btn01 on click");

}functiononmousedown02(event){

alert("btn02 on click");

}

原理：建立一个继承自LSprite的LButton类，给按钮设定两个图片，然后侦听鼠标位置，当鼠标移动到按钮上的时候，变换按钮状态，就是一个简单的按钮。

这里，我用mousemove来侦听鼠标位置，给LGlobal类添加一个buttonList数组，当创建按钮的时候，把按钮加入到buttonList，然后当移动鼠标的时候，就可以从buttonList数组判断鼠标是否在按钮上，然后当按钮被删除后，将按钮从buttonList数组中删除。

一些修改：

1，修改LSprite类，添加die方法，每个LSprite当被removeChild的时候，调用自己的die方法，die方法里放一些被移除是必需处理的事件，比如这次的按钮，要从buttonList中删除。

2，给每个构造器添加objectindex，用来区分每个对象。

3，修改addChild方法，添加DisplayObject.parent = self，就是给每个自对象指定父级对象。

准备完毕，开始创建按钮类LButton。

functionLButton(bitmap_up,bitmap_over){

base(this,LSprite,[]);var self = this;

self.type= "LButton";

self.bitmap_up=bitmap_up;

self.addChild(bitmap_up);if(bitmap_over == null){

bitmap_over=bitmap_up;

}else{

self.addChild(bitmap_over);

}

self.bitmap_over=bitmap_over;

self.bitmap_over.visible= false;

self.bitmap_up.visible= true;

LGlobal.buttonList.push(self);

}

LButton.prototype.buttonModeChange= function(){var self = this;var cood={x:0,y:0};var parent =self.parent;while(parent != "root"){

cood.x+=parent.x;

cood.y+=parent.y;

parent=parent.parent;

}if(self.ismouseon(LGlobal.mouseMoveEvent,cood)){

self.bitmap_up.visible= false;

self.bitmap_over.visible= true;

}else{

self.bitmap_over.visible= false;

self.bitmap_up.visible= true;

}

}

LButton.prototype.die= function(){var self = this;

arguments.callee.super.die.call(this);for(var i=0;i

LGlobal.buttonList.splice(i,1);break;

}

}

}

看一下成果吧,看不到效果的请下载支持HTML5的浏览器