HTML5移動端拖動慣性

下面**只是實現了上下滑動慣性，沒有寫水平滑動慣性。（臨時**筆記，可能會在以後的過程中不斷更新優化**）

/*

* * 慣性原理:
* 產生的速度 = 移動距離 / 移動時間
* 距離 = 鬆開的座標 - 上次的座標  (距離差)
* 時間 = 鬆開的時間 - 按下的時間  (時間差)
* */
var dargfun =,
false
);        
this.dargdom.addeventlistener('touchmove',(event)=>
else
event.stoppropagation(); 
//停止事件傳播
this.translatex = event.changedtouches[0].clientx - this.clientx + this
.startx;
this.translatey = event.changedtouches[0].clienty - this.clienty + this
.starty;
if(this.translatey > 0 )
else
if( this.translatey < -(this.dargdom.scrollheight - this
.dargdom.clientheight))
this.animate(this
.translatey);
},false
);        
this.dargdom.addeventlistener('touchend',(event)=>,
false
);        
},animate:
function
(y)}
export 
default dargfun;

注：當滑動到頁面底部的時候才觸發touchmove事件。

dragfun.init();

HTML5移動端拖動慣性

下面 只是實現了上下滑動慣性，沒有寫水平滑動慣性。臨時 筆記，可能會在以後的過程中不斷更新優化 慣性原理 產生的速度 移動距離 移動時間 距離 鬆開的座標 上次的座標 距離差 時間 鬆開的時間 按下的時間 時間差 var dargfun false this.dargdom.addeventlist...

HTML5移動端優化

手機端筆記 float在渲染時計算量比較大，儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style，使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...

HTML5移動端適配

基準html 機型寬度 可視區域 螢幕比例 html font site 元素寬度 px 元素寬度 rem iphone6 plus 基準 414px 110px 200px 10rem iphone6 375px 375 414 0.9057 375 414 10 9.058 px iphone5...