原创 Canvas-基礎教程

1.canvas基礎   <canvas id="canvas" width="400" height="300" />   注意:canvas通過css來修改長寬的話會影響視覺效果,它只認width屬性和height屬性    

原创 JS-Geolocation API

獲取當前地理位置信息 navigator.geolocation.getCurrentPosition(function(position){      // TO-DO }, function(error){      // TO-DO

原创 CSS-資料收錄

SASS CSS預處理器,另外一個常用的是less 運行環境 - Ruby 官網http://sass-lang.com/documentation/file.SASS_REFERENCE.html 完整的教程: http://www

原创 JS-jquery mobile事件

文檔: http://api.jquerymobile.com/category/events/ 語法: $(element).on('eventName', function(){      // TO-DO }) 觸控事件: ta

原创 JS-Web Workers處理線程

創建線程 var worker = new Worker("work.js") 後臺線程不能訪問頁面或窗口對象 接收數據 worker.onmessage = function(e){} 發送數據 worker.postMessage

原创 JS-資料收錄

插件 jPlayer 視頻、音頻播放插件 http://www.jplayer.org/latest/developer-guide/#jPlayer-option zTree 樹形插件 http://www.ztree.me/v3/

原创 CSS-過渡效果和動畫效果

Transition 過渡效果 transition: property duration timing-function delay 例子: transition: background-color 1s linear 1s, col

原创 HTML-video 與 audio

<video id="video" width="500" controls>      <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="v

原创 Canvas-玫瑰花

<!doctype html><html><head><title>Love</title><meta charset="utf-8" /><!--[if IE]><script src="http://html5shiv.googlec

原创 CSS-MediaQuery

語法: @media 設備類型 and (設備特性 = 樣式代碼) 例子: @media screen and (max-width: 600px) 設備類型: all - 所有設備 screen - 電腦顯示器 print - 打印

原创 JS-applicationCache對象

var appCache = window.applicationCache 狀態: UNCACHED(0) - 沒有緩存 IDLE(1) - 閒置 CHECKING(2) - 檢查中 DOWNLOADING(3) - 下載中 UPDA

原创 CSS-文本換行

默認-瀏覽器自動換行 英文字母 - 按單詞斷句換行 中文字母 - 按字換行 標點 - 不會單獨出現在句首,會連帶前面一個字或者單詞 word-break word-break: (normal | keep-all | break-al

原创 Canvas-五角星

/* 創建五角星路徑 */ function create5Star(context){      var l = 100; // 邊長      context.beginPath();      context.moveTo(0, -

原创 HTML-manifest本地緩存配置

本地緩存配置文件 CACHE MANIFEST #文件開頭必須書寫CACHE MANIFEST #version 7  #上面是這個文件的版本號 CACHE #以下文件使用緩存好的文件 other.html hello.js N

原创 CSS-佈局相關

多欄佈局 column-count: n - 欄數 column-width: width - 欄寬(可以單獨設定每一欄的寬度,也可以只設定元素的寬度,然後自適應) column-gap: width - 欄間距 column-rule: