原创 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: