HTML5 で iPhone ブート インターフェイスのサンプル コードを実装_html5 チュートリアル スキル

/*
* BootPage.js
**/
function BootPage(){
var s = this; );
s.x = 0;
s.timeLayer = new LSprite();
BootPage.prototype .addWallPaper = function( bitmapdata){
var s = this;
s.wallPaper = new LBitmap(bitmapdata);
s.addChild(s.wallPaper); 🎜>};
BootPage.prototype.addTime = function(){
var s = this;
varshadow = new LDropShadowFilter(1,1,"black",8); addChild(s.timeLayer );
s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black");時間テキスト領域
s.timeLayer.alpha = 0.3;
s.timeText.x = 70;
s.timeText.y = 20; >s.timeText.size = 50;
s.timeText.weight = "太字"; >//日付テキスト領域を結合
s.dateText = new LTextField();
s.dateText.x = 110; 100;
s.dateText.color = "白";
s.dateText.filters = [シャドウ]; timeText);
s.addChild(s.dateText);
//タイムラインイベントを通じて日付を更新します
s.addEventListener(LEvent.ENTER_FRAME,function(s){
var date = new Date( );
if(date.getMinutes() if(date.getHours() s.timeText.text = "0" date.getHours() " :0" date .getMinutes();
}else{
s.timeText.text = date.getHours() ":0" date.getMinutes();
}
}else{
if( date.getHours() < 10){
s.timeText.text = "0" date.getHours() ":" date.getMinutes();
}else{
s .timeText.text = date.getHours() ":" date.getMinutes();
}
}
s.dateText.text = date.getMonth() 1 "月" date.getDate() "日";
})
};
BootPage.prototype.addSlider = function(bitmapdata){
s.addChild(s.sliderLayer); >s.sliderLayer .graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black"); 0.3;
//スライダー フレーム レイヤーを追加します
var barBorder = new LSprite();
barBorder.y = iosShape.getScreenHeight()-70; s.addChild( barBorder);
//スライダーの説明を追加します
var moveBarCommont = new LTextField();
moveBarCommont.x = 80; = 10 ;
moveBarCommont.color = "white";
moveBarCommont.text = "スライドしてロックを解除します。";
barBorder.addChild(moveBarCommont); bar = new LSprite();
bar.x = 35;
bar.canMoveBar = false;移動イベント
bar.addEventListener(LMouseEvent.MOUSE_DOWN,function(event,s){
s.canMoveBar = true;
});
bar.addEventListener(LMouseEvent.MOUSE_UP,function(event, s) ){
LTweenLite.to(bar,0.5,{
x:35,
onComplete:function(s){
s.canMoveBar = false;
}
} );
s.canMoveBar = false;
});
s.addChild(bar)
bar.addEventListener(LMouseEvent.MOUSE_OUT,function(event,s){
LTweenLite. to( bar,0.5,{
x:35,
onComplete:function(s){
s.canMoveBar = false;
}
}); false;
});
s.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){
if(bar.canMoveBar == true){
bar.x =event.offsetX - 70;
if(bar.x > 215){bar.x = 215;}
if(bar.x }
});
s.addChild(bar);
//スライダーボックスを描画します
barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black" ) ;
barBorder.alpha = 0.7;
//スライダーを描画します
bar.graphics.drawRoundRect(2,"dimgray",[0,0,70,40,5],true,"lightgray) ");
bar.alpha = 0.7;
};


Since this is just for my own entertainment, I won’t go into much detail about the code. I will only talk about the uses of Shape.js and BootPage.js. Shape.js is the class used to draw the shell of our iPhone, and BootPage.js is the class for the startup interface. The functions of the two are different, which is equivalent to Shape.js being used to handle the appearance of the hardware, and BootPage.js being used to handle the display.
I’ll leave the rest for you to see for yourself. Although the code is a bit long, it is not logical. Just read it slowly! Of course, students who don’t understand may not know about lufylegend. The following is the official website of the engine:
http://lufylegend.com/lufylegend
Engine API documentation:
http://lufylegend.com /lufylegend/api
For students who find it difficult to read code using CSDN blogs, why not use your editor to open the source code and take a look. The source code download address is as follows:
http://files.cnblogs.com/ yorhom/iphone01.rar