多特效代碼請?zhí)砑親TML5前端交流群581549454

廢話不多說，上代碼

css源碼：

/* -----樣式表-----

*/

@charset "utf-8";

body{

background-color:#ddd;

overflow:hidden;

background-position: center center;

}

body *{font-family:"微軟雅黑";}

h1,h2,h3,h4{

margin:0; color:#000;

background-color:#eee;

}

a,a:link,button{cursor:pointer;}

hr{margin:2px;}

.aC1,.aC1:link{

margin:0 5px 0 5px;

font-size:16px;width:120px;height:26px;

display:inline-block;

border:1px solid #FFF;

border-bottom:2px solid #aaa;

text-align:center;vertical-align:middle;

}

.clr1{

background-color:#3CF !important;

color:#fff !important;

}

.clr2{

background-color:#3CF !important;

color:#000 !important;

}

.aC1:hover{

border:1px solid #000;

border-bottom:2px solid #fff;

color:#FFF;

}

.aC1:active{

background-color:#FF6;

color:#333;

}

.aC2,.aC2:link{

padding:8px;

display:inline-block;

border:2px solid #ccc;

text-align:center;vertical-align:middle;

}

.tmpFlo{

padding:0; margin:0;

position:absolute;

z-index:99;

}

/*游戲棋盤*/

.panelTb{

border:6px solid #ccc;

text-align:center;

vertical-align:middle;

border-collapse:collapse;

background-color:#000;

overflow:hidden;

cursor:pointer; /*!*/

}

.panelTb td{

text-align:center;

vertical-align:middle;

margin:0; padding:0;

/*border:1px solid #ddd;*/

}

.panelTb .uni, .tmpFlo .uni{

padding:0; margin:0;

position:relative;

display:block;

text-align:center;

vertical-align:middle;

cursor:pointer;

}

.panelTb .uni img, .tmpFlo .uni img{

width:100%;

height:100%;

}

.warn1{

display:none;position:absolute;

font-weight:900;

color:red;

text-align:center;

width:100%;height:100%;

left:0;top:0;

background-color:#fff;

z-index:900;

}

.warn2{

display:none;position:absolute;

color:#000;

text-align:center;

width:100%;

left:0;top:0;

background-color:#3CF;

font-weight:bold;

z-index:899;

}

/*調(diào)試欄*/

#debugPanel{ /* display:none;*/

background-color:#FFF;

position:absolute;

height:100%;

left:0; top:0;

color:#000;

z-index:999;

overflow:scroll;

}

/*棋子計分面板*/

#scorePanel{

position:absolute;

float:left;

font-size:12px;

color:#396;

}

#scorePanel .hiScore{

color:#FF0;

}

#scorePanel div{

white-space:nowrap;

}

#scorePanel .uni{

display:inline-block;

margin-right:5px;

cursor:pointer;

}

#scorePanel .uni img{

width:100%;

height:100%;

border:1px solid #666;

}

#scorePanel .uni img:hover{

border-color:#FFF;

}

/*棋子單獨計數(shù)欄*/

.scBar{

font-weight:bold;

}

/*復(fù)背景層2*/

#bgTmp1, #bgTmp2{

position:absolute;

margin:0; padding:0;

width:100%;height:100%;

left:0;top:0;

background-position:center center;

}#bgTmp2 img{

width:100%;

height:100%;

border:none;

}

#bgTmp1{

z-index:-99; /*!*/

}

#bgTmp2{

z-index:-98; /*!*/

}

/*播放動畫的容器*/

.cartoonPanel{ display:none;

position:absolute;

margin:0; padding:0;

border:1px solid #ccc;

z-index:99; /*!*/

}.cartoonPanel img{

width:100%;

height:100%;

border:none;

}

/*游戲時間條*/

#gameTimeBar{

position:absolute;

border:2px solid #fff;

border-top:none;

background-color:#555;

}

#gameTimeBar #gameTime{

color:#000;

text-align:center;

vertical-align:bottom;

width:100%;

height:50%;

background-color:#CFC;

position:inherit;

bottom:0;

}

#uGirl1{

position:absolute;

bottom:0;

right:0;

width:497px;

height:400px;

background-position:right bottom;

z-index:-98; /*!*/

}#uGirl1 img{

width:100%; height:100%; border:none;

}

/*游戲結(jié)束后信息面板*/

#endPanel{ display:none;

position:absolute;

left:0; top:0;width:100%; height:100%;

text-align:center;

/*opacity:0.95;*/

background-color:#FFF;

color:#000;

z-index:200;

}

#endPanel #finSumScore{

color:#090;

font-weight:bold;

}

#endPanel p{

width:100%; padding:0; margin:0;

}

#endPanel #finUni{

position:absolute;

width:100%; padding:0; margin:0;

background-color:#6CF;

}

#endPanel .uni{

position:inherit;

width:20%;

}

#endPanel .uni img{

border:none;

width:100%; height:100%;

}

/*#fuckA{ display:none;

padding:2px 6px 3px 6px;

border:2px solid #333;

background-color:#F0C;

color:#000;

}#fuckA:hover{

background-color:#FFC;

}

*/

#btnPnl{

position:fixed;

width:100%;

text-align:center;

bottom:10px;

z-index:800;

}

#endPanel #uGirl1{

z-index:798 !important;

}

#endPanel #aSpeech{

padding:5px;

position:absolute;

background-color:#eee;

color:#06C;

opacity:0.8;

}

更多特效代碼請?zhí)砑親TML5前端交流群581549454

網(wǎng)頁源碼

<!DOCTYPE html PUBLIC "-//aaa-cg//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">

<html xmlns="http://www.aaa-cg.com.cn?lcc">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery網(wǎng)頁消除方塊小游戲源碼</title>

<link rel="stylesheet" href="_css/jwe.css" />

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="_js/method.js"></script>

<!--<script src="_js/ui/jquery.ui.core.js"></script>

<script src="_js/ui/jquery.ui.widget.js"></script>

<script src="_js/ui/jquery.ui.mouse.js"></script>

<script src="_js/ui/jquery.ui.draggable.js"></script>-->

<script type="text/javascript" src="_js/jwe.js"></script>

<script type="text/javascript" src="_js/jwe.core.js"></script>

<script type="text/javascript" src="_js/jwe.game.js"></script>

<script type="text/javascript" src="_js/jwe.ctrl.js"></script>

<script type="text/javascript" src="_js/jwe.animate.js"></script>

<script type="text/javascript" src="_js/jwe.arithmetic.js"></script>

<script>

$(document).ready(function(){

//_dir="x1a2";

//_extName="png";

_bgExtName="png";

_UniTypeNumber=6;

/*$("#btnAgain")

.bind("click",function(){gameRest1Day();});*/

$("#btnReset")

.bind("click",function(){location.reload();});

$("#btnReset2")

.bind("click",function(){location.reload();});

gameStart();

});

</script>

</head>

<body>

<div id="bgTmp1"></div>

<div id="bgTmp2"><img src="_img/bg/bg000.png" /></div>

<div id="uGirl1"></div>

<h2 id="topH" align="center">總分：<span id="sumScore">0</span></h2>

<div id="scorePanel"><hr id="cLine" /></div>

<table id="panelTb" class="panelTb" align="center" ></table>

<div id="gameTimeBar"><div id="gameTime">???</div></div>

<h3 id="btmH" align="center">

<!--<button id="btnAgain" class="aC1 clr1">休息一下</button>-->

<button id="btnReset" class="aC1 clr2">重頭開始</button>

</h3>

<div id="txtTit" class="warn1"></div>

<div id="txtTit2" class="warn2"></div>

<div id="debugPanel"></div>

<div id="cartoonPanel" class="cartoonPanel"></div>

<div id="endPanel">

<h3 align="center">成績統(tǒng)計</h3>

<p>

總分：<span id="finSumScore">0</span>

<!--<a id="fuckA">Let it Go</a>-->

</p>

<p>

<div align="center" id="finUni"></div>

<br />

GAME OVER

</p>

<div id="btnPnl" align="center">

<button id="btnReset2" class="aC2 clr2">再玩一次</button>

</div>

<div id="aSpeech"></div>

</div>

</body>

</html>

用sketch預(yù)先設(shè)計好UI界面

要想成為真正的全棧開發(fā)者，自己會設(shè)計那是必不可少

sketch工具

切圖片導(dǎo)入hype編碼

實現(xiàn)方式：

無聊花了半天做的，其實就是拿一個<audio>實現(xiàn)的，把audio給隱藏了..然后獲取播放進度，切歌就是替換audio的src路徑，<audio>標(biāo)簽有很多api足以自己動手做一個播放器了，無需第三方庫，用到了jQuery，不過這個只是個demo做著玩兒的，還有些功能沒寫了。

在線預(yù)覽地址

http://show.lslbk.cn/html5/musicApp/musicApp.html

源碼demo下載地址：

http://myblog-1253111993.cosgz.myqcloud.com/file/musicAppH5.zip

子創(chuàng)意，關(guān)注前沿科技和創(chuàng)業(yè)資訊，提供專業(yè)的互聯(lián)網(wǎng)開發(fā)，產(chǎn)品設(shè)計，媒體運營支撐服務(wù)和咨詢。如有需求歡迎朋友們合作和咨詢。

更多資訊，點擊上方【訂閱】，訂閱橘子創(chuàng)意。

一、 摘要

今天給大家介紹有關(guān)HTML5移動開發(fā)APP開發(fā)框架,這里主要給大家介紹10款移動APP開發(fā)框架,下一篇文章將給大家具體演示一下如何用這些框架來搭建一個移動APP應(yīng)用.

十款移動APP開發(fā)框架:

1.jquery mobile框架

2.bootstrap框架

3.ionic框架

4.Mobile Angular UI框架

5.Intel XDK框架

6.Appcelerator Titanium框架

7.Sencha Touch框架

8.Kendo UI框架

9.PhoneGap框架

10.mui框架

1.jquery mobile框架

jQuery Mobile是jQuery 在手機上和平板設(shè)備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。

2.bootstrap框架

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

它由Twitter的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。

Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

國內(nèi)一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優(yōu)化而來。

3.ionic框架

Ionic 是一個強大的 HTML5 應(yīng)用程序開發(fā)框架，可以幫助您使用 Web 技術(shù)，比如 HTML、CSS 和 Javascript 構(gòu)建接近原生體驗的移動應(yīng)用程序。

Ionic 主要關(guān)注外觀和體驗，以及和你的應(yīng)用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應(yīng)用程序開發(fā)。

4.Mobile Angular UI框架

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應(yīng)式移動開發(fā)HTML5框架。

Mobile Angular UI的關(guān)鍵字有：

1.Bootstrap 3

2.AngularJS

Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒有的。

AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate

響應(yīng)式媒體查詢是將bootstrap作為單獨的文件，你只需要包含你所需要的東西。

Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過一些AngularJS指令創(chuàng)建友好的用戶體驗。

5.Intel XDK框架

Intel發(fā)布了其首個版本基于web的編程工具，可幫助開發(fā)者為Android和iOS開發(fā)移動應(yīng)用。

這款免費的軟件名為Intel XDK，實際上這是今年2月份Intel收購的AppMobi軟件的重新包裝后的版本，所以并非新鮮事物。開發(fā)者可用此軟件開發(fā)基于HTML5的應(yīng)用，并 用于移動設(shè)備中。

6.Appcelerator Titanium框架

Titanium 是一個跟手機平臺無關(guān)的開發(fā)框架，用來開發(fā)具有本地應(yīng)用效果的Web應(yīng)用。當(dāng)前主要支持 iPhone 和 Android 手機。

主要提供的API包括：

2D/3D animations

Geo-location, compass, and maps

Augmented reality features

Social app authentication and native client support for email

SOAP or REST API calls

Audio, video, and image capture and playback

Taps into local filesystem and SQL lite databases

Accesses photo gallery or address data

橘子創(chuàng)意，關(guān)注前沿科技和創(chuàng)業(yè)資訊，提供專業(yè)的互聯(lián)網(wǎng)開發(fā)，產(chǎn)品設(shè)計，媒體運營支撐服務(wù)和咨詢。如有需求歡迎朋友們合作和咨詢。

更多資訊，搜索微信公眾號juzimedia，關(guān)注橘子創(chuàng)意。