今天我突发其想，想到可以用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. etl工具，kettle实现循环

    Kettle是一款国外开源的ETL工具,纯Java编写,可以在Window.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定. 业务模型: 在关系型数据库中有张很大的数据存储表,被设计成奇偶 ...

  2. php -- 修改字符串的编码格式

    网上的都是这样用的 $content = iconv("utf-8","gb2312",$content); 这样做其实也对着了,看着确实是把utf-8转化为g ...

  3. 【BZOJ】2005: [Noi2010]能量采集（欧拉函数+分块）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2005 首先和某题一样应该一样可以看出每个点所在的线上有gcd(x,y)-1个点挡着了自己... 那么 ...

  4. 【BZOJ】1068: [SCOI2007]压缩（dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1068 发现如果只设一维的话无法转移 那么我们开第二维,发现对于前i个来说,如果确定了M在哪里,第i个 ...

  5. CentOS切换桌面模式和命令行模式

    CentOS系统中命令行模式的快捷键是[Ctrl]+[Alt]+[F1]~[F6],桌面模式的快捷键为[Ctrl]+[Alt]+[F7] 转自: http://blog.sciencenet.cn/b ...

  6. VBS 移除excel数据公式,只保留值

    如果将excel数据公式移除,只保留计算之后的值,将大大减少excel文件. 因为有上篇移除excel外部数据链接的经验,进行excel数据公式移除将快的多,方法如下. 首先我们得明白怎么手动移除ex ...

  7. PHPMailer发送邮箱

    1.可以参考的链接.http://www.helloweba.com/view-blog-205.html 2.下载最新的PHPMailer文件库 3.主要代码 class.phpmailer.php ...

  8. 如何用ChemDraw中的ChemFinder查询反应过程

    ChemFinder是ChemDraw化学绘图软件的重要插件之一,ChemFinder是一个贮存众多化学信息的数据库管理系统,不仅可以用于查询基本化学结构,用户还可以用ChemFinder查询需要的反 ...

  9. 模拟window桌面实现

    正在开发中的游戏有个全屏功能--可以在window桌面背景上运行,就像一些视频播放器在桌面背景上播放一样的,花了个上午整了个Demo放出来留个纪念. 实现功能:显示图标,双击图标执行相应的程序,右击图 ...

  10. SSH电力项目九--运行监控首页显示

    需求:在首页显示出设备运行情况,并去掉<br>换行符,每隔十分钟刷新一次页面. ElecMenuAction.java 首先注入运行监控service public class ElecM ...