Html5兑现iPhone开机界面 _HTML/CSS

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