整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          html5程序員jQuery網(wǎng)頁消除方塊小游戲源碼

          html5程序員jQuery網(wǎng)頁消除方塊小游戲源碼

          多特效代碼請?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)意。


          主站蜘蛛池模板: 精品日韩一区二区| 亚洲性日韩精品国产一区二区| 无码精品人妻一区二区三区免费| 无码AV动漫精品一区二区免费| 国产凹凸在线一区二区| 在线观看精品一区| 无码精品一区二区三区在线| 日本精品一区二区在线播放| 日韩精品一区二区三区老鸭窝| 国产福利视频一区二区| 国产一区中文字幕| 99国产精品欧美一区二区三区| 久久精品国产免费一区| 免费一区二区无码东京热| 岛国精品一区免费视频在线观看| 无码人妻精品一区二区三区99不卡| 韩国精品一区二区三区无码视频 | 久久一区二区明星换脸| 国模丽丽啪啪一区二区| 久久精品无码一区二区app| 日韩精品一区二区三区中文版| 亚洲一区二区三区在线网站 | 午夜无码一区二区三区在线观看| 无码人妻aⅴ一区二区三区| 国产精品一区二区毛卡片| 日韩好片一区二区在线看| 久久久久成人精品一区二区| 午夜福利国产一区二区| 日韩一区二区三区在线精品| 99久久国产精品免费一区二区 | 日本在线视频一区| 美女视频一区二区| 国产福利一区二区精品秒拍| 日本无码一区二区三区白峰美| 伊人色综合视频一区二区三区| 亚洲综合一区二区| 亚洲综合av一区二区三区 | 海角国精产品一区一区三区糖心| 亚洲AV无码一区二区三区在线 | 国产色综合一区二区三区 | 精品一区二区91|