日期:2014-05-16  浏览次数:20642 次

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 =