今天我突发其想，想到可以用HTML5来仿照苹果操作系统做一个能在Web平台运行的iOS。

当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。

完工后的图片：

担心图片是被我PS后的同学可以直接进入下面的地址测试：

http://www.cnblogs.com/yorhom/articles/3163078.html

由于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

觉得用CSDN博客阅读代码有些困难的同学，不仿用你的编辑器打开源代码看看，源代码下载地址如下：

http://files.cnblogs.com/yorhom/iphone01.rar

Html5实现iPhone开机界面的更多相关文章

  1. ubuntu 停在开机界面

    今天有解决了一个问题.我在win7虚拟机上装的64位的Ubuntu 12.04.忘了怎么个情况了,反正就是系统进不去了,停在了开机界面,5个点的那个. 解决方法如下: 开机的时候按住shift键,进入 ...

  2. CentOS7 系统升级，删除centos7开机界面多余选，升级至最新的内核

    一:升级系统 1.检查系统版本: [root@localhost /]# cat /etc/redhat-release CentOS Linux release (Core) 2.运行yum命令升级 ...

  3. iPhone开机键坏了如何开机

    作死 开机 [苹果手机/iphone开机键坏了怎么开机]

  4. Linux centos7开机界面出现多个选项

    centos7开机界面出现多个选项时 前面几个选项正常启动,最后一个选项急救模式启动(系统出项问题不能正常启动时使用并修复系统) 在CentOS更新后,并不会自动删除旧内核.所以在启动选项中会有多个内 ...

  5. 致敬学长！J20航模遥控器开源项目计划【开局篇】 | 先做一个开机界面 | MATLAB图像二值化 | Img2Lcd图片取模 | OLED显示图片

    我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/C ...

  6. 转：苹果iphone APP界面设计尺寸官方版

    苹果iphone APP界面设计尺寸官方版

  7. 26款能够吸引用户的 iPhone App 界面设计

    在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...

  8. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  9. 解决html5 audio iphone,ipd，safari不能自动播放问题

    html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...

随机推荐

  1. The Properties of Posterior of Topic Model

    1.Tang, Jian, et al. "Understanding the Limiting Factors of Topic Modeling via Posterior Contra ...

  2. 011杰信-创建购销合同Excel报表系列-4-建立合同货物（修改，删除）：合同货物表是购销合同表的子表

    前面的一篇文章做的是修改删除,这篇文章做的是合同货物的修改和删除. 业务功能如下:

  3. [转载]Jenkins持续集成项目搭建与实践——基于Python Selenium自动化测试 -2

    自己的代码 import unittest # import HTMLTestRunner_cn as HTMLTestRunner import xmlrunner import sys sys.p ...

  4. 基于Unity5的TPS整理

    1.游戏管理器 游戏管理器负责管理游戏的整体流程,还可以系统管理用于游戏的全局数据以及游戏中判断胜败的条件.游戏管理器并不是单一的模块,更像是能控制游戏的功能集合.1)怪兽出现逻辑:专门设置一些位置用 ...

  5. Gradle学习系列

    http://www.cnblogs.com/davenkin/p/gradle-learning-1.html

  6. 复习及总结--.Net线程篇（3）

    不幸的发现,原来多线程的东西还有好多. 不只是一个Thread就能把事情做完的,好吧,孤陋寡闻了 这里总结下  复习及总结--.Net线程篇(2)里的两个概念AppDomain和ThreadPool ...

  7. 总结界面框架_UI_Adapter

    本人定期更新经典案例及解决方案如有疑问请联系我QQ1822282728 -- 277627117   下面是常用到的ui  Demo 安卓三级筛选菜单listview(非常经典) http://dow ...

  8. 使用jq获取文字的宽度

    获取字符串的长度很简单,但是如何获取一个字符串的字体宽度却是一个不太好操作的问题,今天查阅了许多资料,终于找到了解决方法: 1.首先,需要添加一个标签,HTML代码如下: <body> & ...

  9. height:calc(100% - 40px)

    在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的: .container{ height: calc ...

  10. 7624:山区建小学（划分dp）

    7624:山区建小学 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任意两个村庄 ...