Html5 melaksanakan antara muka but iPhone contoh kemahiran tutorial code_html5

Hari ini saya tiba-tiba mendapat idea dan berfikir bahawa saya boleh menggunakan Html5 untuk meniru sistem pengendalian Apple untuk membuat ios yang boleh berjalan pada platform Web.
Sudah tentu, saya perlu membangunkan sistem pengendalian dan menunggu sehingga saya kembali ke gunung untuk berlatih selama seratus tahun lagi. Mari bergembira hari ini dan buat antara muka permulaan dahulu.
Gambar yang telah lengkap:

Pelajar yang bimbang gambar tersebut telah saya photoshop boleh terus ke alamat berikut untuk menguji:
http://www.cnblogs.com /yorhom/articles /3163078.html
Memandangkan lufylegend dibungkus dengan sangat baik, pembangunan ini masih dilakukan menggunakan enjin ini. Kod tak banyak, kawan-kawan yang berminat boleh tengok terus.
Kod dalam index.html:

Salin kod

Kod tersebut adalah seperti berikut:

;

/skrip> ;

>


Kod dalam Main.js:

Salin kod

Kodnya adalah seperti berikut: init(50,"mylegend",450,640,main); LGlobal.setDebug(true); : "./js/Shape.js",type:"js"},

{path:"./js/BootPage.js",type:"js"},

{name:"wallpaper" , laluan:"./images/wall_paper.jpg"}

];
var datalist = {};
var backLayer,iphoneLayer,screenLayer,buttonLayer; ;
fungsi utama(){
LLoadManage.load(loadData,null,gameInit);
initLayer();
//Tambah shell iphone
addShape();
//Tambah antara muka permulaan
addBack(}
function initLayer(){
//Lapisan latar belakang
backLayer = new LSprite();
addChild(backLayer); ;
iosShape.x = 15;
iosShape.y = 5;
backLayer.addChild(iosShape); ;
bootPage.x = 40;
bootPage.y = 40;
var wallPaperWidth = iosShape.getScreenWidth(); LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight));


Kod dalam Shape.js:





Salin kod


Kod adalah sebagai berikut:


/*
* Shape.js
**/
fungsi Bentuk(jenis,lebar,tinggi){
var s = ini; tapak (s,LSprite ,[]);
s.x = 0;
s.y = 0; ;
/ /Lapisan Shell
s.shapeLayer = new LSprite(); );
s.addChild(s.homeButtonLayer); Paparkan sendiri
s._showSelf();
}
Shape.prototype._showSelf = function(){

var s = this;
switch(s.type){
case "IPHONE":
//Lukis cangkerang

var shadow = new LDropShadowFilter(15,45,"black",20);

s.shapeLayer.graphics.drawRoundRect(10,"black",[ 0,0,s. deviceWidth,s.deviceHeight,15],true,"black"); s.shapeLayer.filters = [shadow]; graphics.drawRect(0," hitam",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white"); Butang laman utamas.homeButtonLayer .graphics.drawArc(1,"black",[s.deviceWidth/2,s.deviceHeight*0.87 s.deviceWidth/10,s.deviceWidth/16,0,2*Math.PI ],true,"#191818" ); s.homeButtonLayer.graphics.drawRoundRect(3,"white",[s.deviceWidth/2-10,s.deviceHeight*0.87 s.deviceWidth/10 - 10,20 ,20,5]); pecah;

}

}; 0.8;

};
Shape.prototype.getScreenHeight = function(){
var s = this;
Yang terakhir ialah kod dalam BootPage.js:

Salin kod

Kod tersebut adalah seperti berikut:

/*
* BootPage.js
**/
fungsi BootPage(){
var s = ini
base(s,LSprite,[] );
s.x = 0;
s.y = 0;
s.timeLayer = new LSprite(); .addWallPaper = function( bitmapdata){
var s = this;
//Tambah imej latar belakang
s.wallPaper = new LBitmap(bitmapdata
s.addChild(s.wallPaper); 🎜>};
BootPage.prototype.addTime = function(){
var s = this;
var shadow = new LDropShadowFilter(1,1,"black",8); addChild(s.timeLayer );
s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black"); kawasan teks masa
s.timeLayer.alpha = 0.3;
s.timeText = new LTextField(); >s.timeText. saiz = 50;
s.timeText.color = "white";
s.timeText.weight = "bold"; >//Sertai kawasan Teks tarikh
s.dateText = new LTextField();
s.dateText.size = 20;
s.dateText.x = 110; 100;
s.dateText.color = "putih";
s.dateText.weight = "bold"; timeText);
s.addChild(s.dateText);
//Kemas kini tarikh melalui acara garis masa
s.addEventListener(LEvent.ENTER_FRAME,function(s){
var date = new Date( );
if(date.getMinutes() if(date.getHours() s.timeText.text = "0" date.getHours() " :0" tarikh .getMinutes();
}else{
s.timeText.text = date.getHours() ":0" date.getMinutes();
}
}else{
jika( date.getHours() s.timeText.text = "0" date.getHours() ":" date.getMinutes(
}else{
s .timeText.text = date.getHours() ":" date.getMinutes();
}
}
s.dateText.text = date.getMonth() 1 "month" date.getDate() "hari";
})
};
BootPage.prototype.addSlider = function(bitmapdata){
var s = this; >s.sliderLayer .graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black");
s.sliderLayer.alpha = 0.3;
//Tambahkan lapisan bingkai gelangsar
var barBorder = new LSprite();
barBorder.x = 35; s.addChild( barBorder);
//Tambah huraian slider
var moveBarCommont = new LTextField();
moveBarCommont.size = 12; = 10 ;
moveBarCommont.color = "white";
moveBarCommont.text = "Slide to unlock."; bar = new LSprite();
bar.x = 35;
bar.y = iosShape.getScreenHeight()-70; movement Event
bar.addEventListener(LMouseEvent.MOUSE_DOWN,function(event,s){
s.canMoveBar = true;
}); s) ){
LTweenLite.to(bar,0.5,{
x:35,
onComplete:function(s){
s.canMoveBar = false;
}
} );
s.canMoveBar = palsu;
});
s.addChild(bar); to( bar,0.5,{
x:35,
onComplete:function(s){
s.canMoveBar = false;
}
}); palsu;
});
s.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){
if(bar.canMoveBar == true){
bar.x = event.offsetX - 70;
jika(bar.x > 215){bar.x = 215;}
jika(bar.x }
});
s.addChild(bar);
//Lukis kotak peluncur
barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black" ) ;
barBorder.alpha = 0.7;
//Lukis peluncur
bar.graphics.drawRoundRect(2,"dimgray",[0,0,70,40,5],true,"lightgray ");
bar.alpha = 0.7;
};


Da dies nur zu meiner eigenen Unterhaltung dient, werde ich nicht näher auf den Code eingehen, sondern nur auf die Verwendung von Shape.js und BootPage.js eingehen. Shape.js ist die Klasse, die zum Zeichnen der Hülle unseres iPhones verwendet wird, und BootPage.js ist die Klasse für die Startschnittstelle. Die Funktionen der beiden sind unterschiedlich. Dies entspricht der Verwendung von Shape.js zur Verwaltung des Erscheinungsbilds der Hardware und der Verwendung von BootPage.js zur Verwaltung der Anzeige.
Den Rest überlasse ich Ihnen. Obwohl der Code etwas lang ist, ist er nicht logisch. Lies es einfach langsam! Natürlich wissen Studenten, die es nicht verstehen, möglicherweise nichts über lufylegend. Das Folgende ist die offizielle Website der Engine:
http://lufylegend.com/lufylegend
Engine-API-Dokumentation:
http:/ /lufylegend.com /lufylegend/api
Für Studenten, denen es schwerfällt, Code mithilfe von CSDN-Blogs zu lesen, können Sie den Quellcode mit Ihrem Editor öffnen und einen Blick darauf werfen. Die Download-Adresse für den Quellcode lautet wie folgt:
http://files.cnblogs.com/yorhom/iphone01.rar