
Ò»¡¢ÏîÄ¿µØÖ·
1¡¢TGAÒÆ¶¯ÓÎÏ·¹ÙÍø


TGA³ÇÊÐÀÁ¦Èü

2¡¢UP+ÑûÇ뺯


3¡¢ÌìÌì¿áÅÜÀïÔ¼½ø»÷°æ


¶þ¡¢²¼¾Ö
1¡¢°´ÆÁ¹ö¶¯»áÅöµ½Ê²Ã´ÎÊÌ⣿
ÎÊÌ⣺
°´ÆÁ¹ö¶¯¼´Óû§»¬¶¯ÆÁÄ»·Ò³£¬ÆÁÄ»×Ô¶¯Ëø¶¨µ½µ±Ç°Ò³¡£ÎÒÃÇ»áÅöµ½µÄÎÊÌ⣺
1£©¡¢Ò³Ãæ100%¸ß¶È°üº¬µØÖ·À¸¸ß¶È£¬µ±µØÖ·À¸´æÔÚʱ£¬»áÓв¿·ÖÄÚÈݱ»Òþ²Ø£¬ÈçÏÂͼËùʾ£º

2£©¡¢ÈçºÎ×èÖ¹ä¯ÀÀÆ÷ĬÈϹö¶¯Ê¼þ¸üºÃ£¿
½â¾ö£º
1£©¡¢ÖØÖÃ<html>¸ß¶È£»
document.documentElement.style.height = window.innerHeight + 'px'; |
2£©¡¢Ä¬ÈÏʼþ½ûÖ¹touchmove±Ètouchstart¸üºÃ£¬·ñÔò»¹ÐèÒªµ¥¶À´¦Àí<a><input>µÈÎÊÌâ¡£
document.documentElement.addEventListener('touchmove', function(e){ e.preventDefault(); }); |
2¡¢flexbox»áÅöµ½Ê²Ã´ÎÊÌ⣿
ÎÊÌ⣺
×ÔÊÊÓ¦¸ß¶È/¿í¶ÈµÄflexÔªËØÄÚ£¬×ÓÔªËØ³ß´çÒÔ°Ù·Ö±ÈΪµ¥Î»£¨Èçheight:100%£©ÎÞЧ¡£

½â¾ö£º
ÐèÒª½«×ÓÔªËØÉèΪ¾ø¶Ô¶¨Î»¡£
3¡¢fixed¶¨Î»ÐèÒªÉ÷Óá£
ÎÊÌ⣺
ÔÚiosϵͳµÄä¯ÀÀÆ÷ÖУ¬Ò³Ãæ¼ÓÔØÊ±Å¼¶û»á³öÏÖ¶¶¶¯Çé¿ö¡£
½â¾ö£º
ʹÓþø¶Ô¶¨Î»»òflexboxÄ£Äâ½â¾ö¡£
Èý¡¢¶¯»
1¡¢CSS¶¯»ÓëCanvas¶¯»ÐÔÄÜÓÅÁÓ·ÖÎö
ÎÊÌ⣺
Ä¿Ç°ÒÆ¶¯¶Ë¶¯»£¬ÌرðÔÚH5ÓÎÏ·ÓëÇ¿½»»¥ÐÔÍøÕ¾Ó¦Ó÷dz£ÆÕ±é£¬³£ÓõÄʵÏÖ·½Ê½ÊÇCSS£¨Ó²¼þ¼ÓËÙ£©ÓëCanvas£¬µ«È±·¦ÍêÕûµÄÐÔÄÜ·ÖÎöÊý¾Ý£¬ÎÒÃÇÔÚÑ¡Ôñ¶¯»ÊµÏÖ·½Ê½Ê±»¹ÊÇ´æÔÚ¾À½á¡£
½â¾ö£º
Ñ¡ÓøßÖеͲ»Í¬ÅäÖò»Í¬ÏµÍ³µÄ4¿îÉ豸£¬½øÐÐÁËÒ»ÂÖ²âÊÔ£º
1£©¡¢²âÊÔDEMO£º

Canvas: 2¸öÔªËØ

Canvas£º10¸öÔªËØ

DOM£º2¸öÔªËØ

DOM£º10¸öÔªËØ
2£©¡¢²âÊÔÊý¾Ý£º
ºìÉ«´ú±í¾¯¸æÊý¾Ý£¬Ò»°ã60ÒÔÉϽÏΪ˳³©¡£

3£©¡¢²âÊÔ½áÂÛ£º
a¡¢CSS¶¯»¸üΪÁ÷³©¡¢µ«ÄÚ´æÕ¼Óùý¸ß£¬¶¯»ÔªËØÔÚ5¸öÒÔÄÚ¸üÎªÍÆ¼ö£»
b¡¢Canvas¶¯»´æÔÚ¶ªÖ¡ÏÖÏó£¬ÕâÒ»ÏÖÏóÔÚandroidÖеͶËÊÖ»úÖбíÏÖ¸üΪÃ÷ÏÔ£»
c¡¢5¸öÒÔÄÚ¶¯»ÔªËØ£¬Ñ¡ÓÃCSS¶¯»£¬80%µÄÉ豸֡Ƶ¿É´ï80ÒÔÉÏ¡£
2¡¢µ±Ëõ·Å¶¯»ÅöÉÏÓ²¼þ¼ÓËÙ
ÎÊÌ⣺
ÈçÏÂͼËùʾ£¬ÈçºÎƽ»¬µØÊµÏֵײ¿µ¼º½µÄËõ·ÅÄØ£¿
1£©¡¢²»ÄÜÖ±½ÓÓÃscaleÀ´Ëõ·Å£¬ÕâÑù»áÔì³ÉÎÄ×ÖµÄËõ·ÅÓëÐ黯£»
2£©¡¢²»ÄÜͨ¹ý heightµÄ±ä»¯À´¸ü¸Ä¸ß¶È£¬ÕâÑù²»ÄÜÆôÓÃÓ²¼þ¼ÓËÙ¡£

½â´ð£º
ÐèÒª·Ö²ðʵÏÖ£¬¸ß¶È±ä»¯ÓÃtranslateYÀ´×ö£¬µ¥¶À¶ÔÀïÃæµÄͼ±êʹÓÃscale¡£
´úÂ룺
nav{transition:.5s all ;} nav .icon{transition:.5s all;transform-origin:center bottom;} nav.mini{transform: translate(0, 50px);} nav.mini .icon{transform: scale(0.5, 0.5);} |
3¡¢¶¯»ÓÉJavascriptÀ´Î¬»¤»¹ÊÇcssά»¤µÄ˼¿¼
½üÆÚÖÆ×÷µÄ¼¸¸ö¶¯»½Ï¶àµÄÍøÕ¾£¬ÔÚ¶¯»µÄµ÷ÕûÓëά»¤ÉÏ»¨Á˲»ÉÙʱ¼ä£¬ÓÚÊÇÓÐÁËÒÔÏÂ˼¿¼¡£
1£©¡¢ÅжÏÓÅÁÓά¶È
¿ª·¢Ð§ÂÊ¡¢Î¬»¤¡¢ÐÔÄÜ
2£©¡¢¾ßÌå·ÖÎö
a¡¢ÓÉCSSά»¤¡£
ʵÏÖ£º
½áºÏtransitionºÍanimation£¬½«¶¯»Ê±¼äÖáдËÀÔÚCSSÖС£
¿ª·¢Ð§ÂÊ£º¸ß¡£
½áºÏÏÖÓÐÅäÌ×¹¤¾ß£¬Äܹ»¿ìËÙÍê³É¶¯»ÖÆ×÷¡£
ά»¤£º²î¡£
Èç¹û¶¯»Éæ¼°»Øµ÷º¯ÊýÖ´ÐУ¬Ê±¼äÖáͬʱ´æÔÚÓÚCSSÓëJavascriptÖУ¬Î¬»¤³É±¾»á´ó´óÌáÉý¡£Èç¹ûÉæ¼°ÅжÏÓëÑ»·£¬¶¯»Ð§¹û½«Í¬Ê±ÓÉCSSÓëJavascriptÀ´Î¬»¤£¬´ú¼ÛÌ«¸ß¡£
ÐÔÄÜ£º¸ß¡£
¶¯»ÎÞÐè½âÎöJavascript£¬¼õÉÙDOM²Ù×÷£¬ÐÔÄܽÏJavascriptµÄ·½Ê½¸ü¸ß¡£
b¡¢ÓÉJavascriptά»¤¡£
·â×°¶¯»¿ò¼Ü£¬µ×²ãµ÷ÓÃCSS¶¯»£¬Ê±¼äÖáÓÉJavascriptÀ´Î¬»¤¡£
¿ª·¢Ð§ÂÊ£º¸ß¡£ÎÞÐ迼ÂǸ÷ƽ̨¼æÈÝÐÔ£¬ÅäÖòÎÊý¼´¿ÉÍê³É¶¯»£¬¶ÔÓÚ¸´ÔÓ¶¯»£¬Ò²¿É¿ª·¢ÅäÌ×¹¤¾ß¡£
ά»¤£ººÃ¡£¶¯»Ð§¹û¡¢¶¯»Âß¼£¬È«²¿ÓÉJavascriptÀ´Î¬»¤£¬¶¯»¿É¿ØÐÔ¸ü¸ß£¬Î¬»¤±äµÃºÜÇáËÉ¡£
ÐÔÄÜ£º½Ï¸ß¡£ÓÉÓڵײ㻹Êǵ÷ÓÃCSS¶¯»£¬DOM²Ù×÷´ÎÊýÓÐÏÞ£¬ÐÔÄÜËðºÄ²¢²»»áÌ«¸ß¡£
3£©¡¢×ܽᡣ
¶ÔÓÚÈõ½»»¥£¬ÎÞÂß¼µÄ¶¯»£¬¿ÉÒÔÑ¡ÓÃCSSµÄ·½Ê½¡£¶ÔÓÚ¸´ÔÓ¶¯»£¬¸üÍÆ¼öÓÉJavascriptÀ´Î¬»¤¡£
ËÄ¡¢ÌØÐÔ
1¡¢ÈçºÎ½â¾öÒôƵ²¥·ÅÔ¤¼ÓÔØÓëÑÓʱµÄÎÊÌâ
ÎÊÌ⣺
ͨ¹ý¶Ô¸÷¸öƽ̨ϽøÐÐÒôÆµÌØÐÔ²âÊÔ£¬´æÔÚÎÊÌâÈçÏ£º

½â¾ö£º

´úÂ룺
·â×°Àࣺ
var lib = {
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
decodeArrayBuffer: function(input) {
var bytes = (input.length/4) * 3;
var ab = new ArrayBuffer(bytes);
this.decode(input, ab);
return ab;
},
decode: function(input, arrayBuffer) {
var lkey1 = this._keyStr.indexOf(input.charAt(input.length-1));
var lkey2 = this._keyStr.indexOf(input.charAt(input.length-2));
var bytes = (input.length/4) * 3;
if (lkey1 == 64) bytes--;
if (lkey2 == 64) bytes--;
var uarray;
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
var j = 0;
if (arrayBuffer)
uarray = new Uint8Array(arrayBuffer);
else
uarray = new Uint8Array(bytes);
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
for (i=0; i<bytes; i+=3) { enc1 = this._keyStr.indexOf(input.charAt(j++)); enc2 = this._keyStr.indexOf(input.charAt(j++)); enc3 = this._keyStr.indexOf(input.charAt(j++)); enc4 = this._keyStr.indexOf(input.charAt(j++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >>
2);
chr3 = ((enc3 & 3) << 6) | enc4;
uarray[i] = chr1;
if (enc3 != 64) uarray[i+1] = chr2;
if (enc4 != 64) uarray[i+2] = chr3;
}
return uarray;
},
getScript: function(url, callback, charset){
var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
script.src = url;
charset && (script.charset = charset);
script.onload = script.onreadystatechange = function() {
if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete") ) {
callback && callback();
script.onload = script.onreadystatechange = null;
if (head && script.parentNode) head.removeChild(script);
}
};
head.appendChild(script);
return script;
}
}
var QAudio = function(config){
this.config = config;
this.init();
}
QAudio.prototype.init = function(){
var config = this.config;
this.src = config.src;
this.base64 = config.base64;
if ('AudioContext' in window) {
this.audioContext = new AudioContext();
} else if ('webkitAudioContext' in window) {
this.audioContext = new webkitAudioContext();
} else {
this.audio = document.createElement('audio');
this.audio.preload = 'auto';
this.audio.src = this.src;
}
// base64Êý¾Ý´¦Àí
if(this.audioContext) {
this._handleBase64();
}
this.load();
}
QAudio.prototype._handleBase64 = function(){
var self = this;
window[this.config.callback] = function(data){
var arrayBuff = lib.decodeArrayBuffer(data);
self.audioContext.decodeAudioData(arrayBuff, function(audioData) {
self._arrayBuff = audioData;
});
}
}
QAudio.prototype.load = function(){
// Èç¹ûÖ§³ÖWeb Audio£¬¼ÓÔØbase64ÒôƵ
if(this.audioContext) {
lib.getScript(this.base64);
} else if(this.audio) {
this.audio.load();
}
}
QAudio.prototype.play = function(){
if(this.audioContext) {
var mySource = this.audioContext.createBufferSource();
mySource.buffer = this._arrayBuff;
mySource.connect(this.audioContext.destination);
if ('AudioContext' in window) {
mySource.start(0);
} else if ('webkitAudioContext' in window) {
mySource.noteOn(0);
}
} else if(this.audio) {
this.audio.play();
}
} |
µ÷Óãº
new QAudio({src: './audio/pop1.mp3', base64: './audio/pop1.js', callback: 'cbPop1'}); |
ʾÀý£º

2¡¢ÖØÁ¦¸ÐÓ¦
ÎÊÌ⣺
ÖØÁ¦¸ÐÓ¦µÄʵÏÖÏà¶Ô¼òµ¥£¬¾ßÌå¼ûÈçÏ´úÂë¡£ÖµµÃ×¢ÒâµÄÊÇ£¬androidÐè3.0¼°ÒÔÉϲÅÖ§³Ö¡£
½â¾ö£º

´úÂ룺
var box = document.querySelector('.box'); var timer; window.addEventListener('deviceorientation', function(e) { var x = parseInt(e.gamma); var y = parseInt(e.beta); var r = parseInt(e.alpha); box.style.webkitTransform = 'translate3d(' + x*window.innerWidth/180 + 'px, '+
y*window.innerHeight/180 +'px, 0) rotate('+ r +'deg)' }); |
3¡¢Æô¶¯ÔÉúÓ¦ÓÃ
±³¾°£º
ÔÚÈ«Ãñ·É»ú´óÕ½ÒÆ¶¯°æµÄ¿ª·¢ÖУ¬ÐèÒªÂú×ãÒ»¸öÐèÇ󣬵±Óû§µã»÷ÏÂÔØ°´Å¥Ê±£¬Èç¹ûÓû§ÒѾ°²×°Á˸ÃAPP£¬ÔòÖ±½ÓÆô¶¯£¬·ñÔòÌøµ½ÏÂÔØÒ³¡£
ÎÊÌ⣺
ÔÚÍøÒ³ÖÐÈçºÎÆô¶¯ÔÉúÓ¦Óã¿
½â¾ö£º
Ê×ÏÈͨ¹ýURL Scheme³¢ÊÔ´ò¿ª±¾µØAPP£¬Èç¹û´ò¿ª³É¹¦£¬ÍøÒ³ÖÐsetTimeout½«»á¹ÒÆð£¬ÖØÐ»ص½Ò³ÃæÊ±³¬Ê±²»ÔÙÖ´ÐУ¬·ñÔò£¬Èç¹û´ò¿ªÊ§°Ü£¬Ôò³¢ÊÔÏÂÔØ»ò½øÈëÏÂÔØÒ³Ãæ¡£
´úÂ룺
(function(){
var iosURL = 'itms-apps://itunes.apple.com/cn/app/quan-min-fei-ji-da-zhan/id731871690?l=en&mt=8';
var androidURL = 'http://dlied5.qq.com/wefly/release/android/1.0.5/wefly_1.0.5.6_android_8CF5F95E.apk';
var iosScheme = 'tencentlaunch100539858:';
var androidScheme = 'webwx47a71dd8a1875943:';
var homePage = '/web201404/';
if(/iphone|ipod|ipad/i.test(navigator.userAgent)) {
window.location = iosScheme;
var startDate = new Date();
setTimeout(function(){
if(new Date() - startDate > 1000) return;
window.location= iosURL;
window.setTimeout(function(){
window.location= homePage;
}, 100)
} , 800);
} else if(/android/i.test(navigator.userAgent)) {
window.location = androidScheme;
var startDate = new Date();
setTimeout(function(){
if(new Date() - startDate > 1000) return;
window.location= androidURL;
window.setTimeout(function(){
window.location= homePage;
}, 1000)
} , 800);
} else {
alert('·Ç³£±§Ç¸£¬±¾ÓÎÏ·ÔÝʱֻÌṩandroidºÍios°æ¡£');
window.location= homePage;
}
})(); |
4¡¢µØÀí¶¨Î» HTML 5 Geolocatioin
µØÀí¶¨Î»ÊÇHTML 5µÄÖØÒªÈÈÐÔÖ®Ò»£¬ËüÌṩÁËÓû§µÄÈ·ÇÐλÖ㨾γ¶È£©¡£½èÖúÕâ¸öÌØÐÔÎÒÃÇÄܹ»¿ª·¢»ùÓÚµØÀíλÖõÄÒ³Ãæ¡£
HTML 5 Geolocatioin API ʹÓÃÆðÀ´ºÜ¼òµ¥£¬ÎÒÃÇͨ¹ýÏÂÃæµÄ·½Ê½µ÷Óá£
ar x=document.getElementById("demo"); function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); }else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position){ x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } |
´úÂëÂß¼ÊÇÏÈÅжÏÄãµÄÉ豸֧²»Ö§³ÖÕâ¸ö½Ó¿Ú£¬½ø¶ø¸ø³öÏàÓ¦µÄ¾Î³¶È¡£½áºÏTGA³ÇÊÐÈüÕâ¸ö°¸Àý£¬ÎÒÃÇ¿ÉÒÔͨ¹ýÓû§ÔÚ·ÃÎÊÒ³ÃæµÄʱºò£¬»ñÈ¡Æä¾Î³¶È£¬ÅжÏÓû§ËùÔڵijÇÊУ¬×Ô¶¯ÎªÆäÑ¡ÖеØÖ·£¬¼õÉÙ²Ù×÷²½Öè¡£Èçͼ£º

µØÖ·£º

ÕâÀïÓÐÒ»¸öС¼¼ÇÉ£¬Ê¹ÓÃÕâ¸öAPIÎÒÃÇÖ»ÄÜ»ñÈ¡µ½¾Î³¶È£¬ÄÇÔõôת»»³É¶ÔÓ¦µÄ¾ßÌ嵨ַĨ£¿
1. ¿ÉÒÔʹÓÃgoogleµÄµØÍ¼API£º
http://maps.google.com/maps/api/geocode/json?latlng=39.9,41.033&language=zh-CN&sensor=true
Ö»Òª´«ÈëÕýÈ·µÄ¾Î³¶È£¬¾ÍÄܹ»·µ»ØÏàÓ¦µÄ¾ßÌåµ½½ÖµÀµÄjsonÊý¾Ý¡£
2. ͨ¹ýÎÒÃÇÌÚѶµØÍ¼µÄµØÖ·½âÎö£¬¿ÉÒÔ×öµ½¾ßÌ嵨ÀíλÖÃ×Ö·û¸ú¾Î³¶ÈµÄת»»¡£
http://open.map.qq.com/javascript_v2/case-run.html#sample-geocoding-simple¡£
Îå¡¢ÆäËü
1¡¢×ÖÌåͼ±êÓ¦ÓÃÉè¼Æ»·½ÚµÄ´òͨ
ÎÊÌ⣺
×ÖÌåͼ±êÔÚÕâ¸öÏîÄ¿ÖдóÁ¿Ó¦Ó㬵«ÃæÁÙµÄÒ»¸öÎÊÌâÊÇ£¬¸¨Öúǰ¶Ë¿ª·¢µÄÅäÌ×¹¤¾ßÒѾ·Ç³£³ÉÊ죬µ«Éè¼Æ»·½ÚµÄ´òͨһֱÊÇһƬ¿Õ°×¡£Éè¼ÆÊ¦ÔÚÓ¦ÓÃ×ÖÌåͼ±êʱ»¹ÊÇÖ»ÄÜÒÔ×îÔʼµÄ·½Ê½½«Í¼±êÍÏÈëÉè¼Æ¸å£¬Ê®·Ö²»±ã¡£
½â¾ö£º
ΪÉè¼ÆÊ¦Ìṩһ¿îPhotoshop²å¼þ£¬½«×ÖÌåÎļþµ¼Èë²å¼þ£¬Éè¼ÆÊ¦¿ÉÒÔÖ±½Óµã»÷ͼ±ê²åÈëÉè¼Æ¸å£¬½«×ÖÌåͼ±êÓ¦ÓõÄÉè¼Æ»·½Ú´òͨ£¬¸Ã²å¼þÕýÔÚ¿ª·¢ÖС£

2¡¢µ±transformÅöÉÏÄ£ºý
ÎÊÌ⣺
ÈçÏÂͼball1Ëùʾ£¬ÔÚandroidÖУ¬Èç¹ûÔªËØ»òÆä¸¸ÔªËØÓ¦ÓÃtransformºó£¬ÔªËØÉèÖÃborder-radius»á±äÄ£ºý¡£

½â¾ö£º
½«ÔªËØ·Å´óÒ»±¶ºó£¬ÔÙ½øÐÐËõ·Å£¨Èç¹û¸ÃÔªËØºóÓÐÎı¾½Úµã£¬Ò²¿É±ÜÃâÄ£ºý£©
body{padding: 20px;background:purple;-webkit-transform: translate3d(0px, 0px, 0px);} .ball1{width: 50px;height: 50px;border-radius:25px;margin-top: 20px;background: #fff;} .ball2{width: 100px;height: 100px;border-radius:50px;margin-top: 20px;background: #fff;
-webkit-transform-origin:0 0;-webkit-tran |
DEMOµØÖ·£º

Áù¡¢Êý¾Ý
Óû§»·¾³
´ÓTGAÒÆ¶¯ÓÎÏ·¹ÙÍøÍ³¼ÆÊý¾Ý·ÖÎö£º
1£©¡¢³éÑù50%·ÃÎÊÁ¿Í³¼Æ£¬Òƶ¯¶ËÓû§Æ½¾ù¼ÓËÙËÙ¶ÈΪ70Kb/s£»
2£©¡¢×ܼÓÔØÊ±¼äΪ4.12s£¬86%µÄÓû§Ô¸ÒâµÈ´ýÒ³Ãæ¼ÓÔØÍê±Ï£¬52%µÄÓû§µÖ´ïµÚ¶þÆÁ£»

3£©¡¢Õâ´Î¹öÆÁÖ§³ÖÓû§µã»÷ÓÎϷͼ±ê»òÊÖÖ¸»¬¶¯£¬µ«Ö»ÓÐ7%µÄÈË»áʹÓõã»÷²Ù×÷£¬ÎÒÃǺóÐøÏîÄ¿µÄÉè¼ÆÖпÉÒԵõ½Æô·¢¡£

|