- 盡量使用單頁(yè)面開(kāi)發(fā)(SPA)
- 慎重選擇前端UI框架
- 動(dòng)畫(huà)、特性使用準(zhǔn)則(60fps)
- 長(zhǎng)度單位使用rem
瀏覽器消耗最小的css屬性
- 位置-tranform: translate(x,y,z)
- 大小-tranform: scale(n)
- 旋轉(zhuǎn)-tranform: rotate(ndeg)
- 透明度-opacity: 0..1
實(shí)現(xiàn)手機(jī)點(diǎn)擊事件
基于touchstart、touchend和touchmove三個(gè)基礎(chǔ)事件實(shí)現(xiàn)點(diǎn)擊事件
結(jié)合jquery代碼如下:
$(function() {
var size = $(window).width()/18; //設(shè)備寬度除以18
$("html").css("font-size", size);
var myscroll = new IScroll("#file-list"); //用ISscroll實(shí)現(xiàn)內(nèi)容滾動(dòng)
$("#file-list li").bindtouch(function() {
$(this).remove();
})
});
$.fn.bindtouch = function(cb) {
attachEvent($(this), cb);
};
//實(shí)現(xiàn)點(diǎn)擊函數(shù)
function attachEvent(src, cb) {
$(src).unbind();
var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if (isTouchDevice) {
$(src).bind("touchstart", function(event) {
$(this).data("touchon", true);
$(this).addClass("pressed");
});
$(src).bind("touchend", function() {
$(this).removeClass("pressed");
if ($(this).data("touchon")) {
cb.bind(this)();
}
$(this).data("touchon", false);
});
$(src).bind("touchmove", function() {
$(this).data("touchon", false);
$(this).removeClass("pressed");
});
} else {
$(src).bind("mousedown", function() {
$(this).addClass("pressed");
$(this).data("touchon", true);
});
$(src).bind("mouseup", function() {
$(this).removeClass("pressed");
$(this).data("touchon", false);
cb.bind(this)();
});
}
}
