Html5实现iPhone开机界面
文章源自:http://blog.csdn.net/yorhomwang/article/details/9205201
由于lufylegend封装得的确不错，本次开发还是用该引擎做的。代码不多，感兴趣的朋友可以直接看一下。
index.html中的代码：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>iphone</title><script src="./lufylegend-1.7.7.min.js"></script><script src="./js/Main.js"></script></head><body><div id="mylegend">loading......</div></body></html>
?Main.js中的代码：
init(50,"mylegend",450,640,main);LGlobal.setDebug(true);var loadData = [{path:"./js/Shape.js",type:"js"},{path:"./js/BootPage.js",type:"js"},{name:"wallpaper",path:"./images/wall_paper.jpg"}];var datalist = {};var backLayer,iphoneLayer,screenLayer,buttonLayer;var iosShape;var bootPage;function main(){LLoadManage.load(loadData,null,gameInit);}function gameInit(result){datalist = result;//初始化层initLayer();//加入iphone外壳addShape();//加入开机界面addBack();}function initLayer(){//背景层backLayer = new LSprite();addChild(backLayer);}function addShape(){iosShape = new Shape("IPHONE",400,600);iosShape.x = 15;iosShape.y = 5;backLayer.addChild(iosShape);}function addBack(){bootPage = new BootPage();bootPage.x = 40;bootPage.y = 40;var wallPaperWidth = iosShape.getScreenWidth();var wallPaperHeight = iosShape.getScreenHeight();bootPage.addWallPaper(new LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight));bootPage.addTime();bootPage.addSlider();iosShape.addChild(bootPage);}?Shape.js里的代码：
/** Shape.js**/function Shape(type,width,height){var s = this;base(s,LSprite,[]);s.x = 0;s.y = 0;s.deviceWidth = width;s.deviceHeight = height;s.type = type;//外壳层s.shapeLayer = new LSprite();s.addChild(s.shapeLayer);//Home按钮层s.homeButtonLayer = new LSprite();s.addChild(s.homeButtonLayer);//屏幕层s.screenLayer = new LSprite();s.addChild(s.screenLayer);//显示自身s._showSelf();}Shape.prototype._showSelf = function(){var s = this;switch(s.type){case "IPHONE"://画外壳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];//画屏幕s.screenLayer.graphics.drawRect(0,"black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white");//画Home按钮s.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]);break;}};Shape.prototype.getScreenWidth = function(){var s = this;return s.deviceWidth*0.8;};Shape.prototype.getScreenHeight = function(){var s = this;return s.deviceHeight*0.8};?最后是BootPage.js里的代码：
/** BootPage.js**/function BootPage(){var s = this;base(s,LSprite,[]);s.x = 0;s.y = 0;s.timeLayer = new LSprite();s.sliderLayer = 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;var shadow = new LDropShadowFilter(1,1,"black",8);s.addChild(s.timeLayer);s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black");//加入时间文本区s.timeLayer.alpha = 0.3;s.timeText = new LTextField();s.timeText.x = 70;s.timeText.y = 20;s.timeText.size = 50;s.timeText.color = "white";s.timeText.weight = "bold";s.timeText.filters = [shadow];//加入日期文本区s.dateText = new LTextField();s.dateText.size = 20;s.dateText.x = 110;s.dateText.y = 100;s.dateText.color = "white";s.dateText.weight = "bold";s.dateText.filters = [shadow];s.addChild(s.timeText);s.addChild(s.dateText);//通过时间轴事件更新日期s.addEventListener(LEvent.ENTER_FRAME,function(s){var date = new Date();if(date.getMinutes() < 10){if(date.getHours() < 10){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){var s = this;s.addChild(s.sliderLayer);s.sliderLayer.graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black");s.sliderLayer.alpha = 0.3;//加入滑块框层var barBorder = new LSprite();barBorder.x = 35;barBorder.y = iosShape.getScreenHeight()-70;s.addChild(barBorder);//加入滑块说明文字var moveBarCommont = new LTextField(); moveBarCommont.size = 12;moveBarCommont.x = 80;moveBarCommont.y = 10; moveBarCommont.color = "white"; moveBarCommont.text = "Slide to unlock.";barBorder.addChild(moveBarCommont);//加入滑块层var bar = new LSprite();bar.x = 35;bar.y = iosShape.getScreenHeight()-70;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;}});s.canMoveBar = 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 < 35){bar.x = 35;}}});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;};?由于本次是偶自娱自乐，所以代码就不多讲了，只讲一下Shape.js和BootPage.js的用途。Shape.js是用来绘画我们iphone手机 外壳用的类，而BootPage.js是开机界面的类。两者的功能不同，相当于Shape.js用来处理硬件外观，BootPage.js用来处理显示。
其他的就留个大家自己看吧。虽然代码有点长，但是都不带逻辑性。慢慢读就Ok！当然，读不懂的同学可能是没有了解过lufylegend，以下是引擎官方的网站：
http://lufylegend.com/lufylegend
引擎API文档：
http://lufylegend.com/lufylegend/api
?
?