移動端動效

標籤：tin   初始化   一個   query   epo   時間   call   動畫   rtti   

1）上下滾動回彈

function swipe(){

//需求： 

//1、擷取要滾動的ul及ul的父級

var  ulFather = document.querySelector(‘.container‘);

var ul = ul.querySelector(‘ul‘);

//2、擷取滾動正常範圍

var startY =0 ;

var moveY =0 ;

//滾動的距離

var dist = 0 ;

//當前ul滾動位置

var curDisY = 0 ;

//向下滾動時正常範圍

var normalScrollDown =  0 ;

//向上滾動時正常範圍 

var normalScrollUp = left.offsetHeight - ul.offsetHeight;

//向下滾動時最大範圍

var maxScrollDown = 100  + normalScrollDown ;

//向上滾動時最大範圍

var maxScrollUp = normalScrollUp -100;

left.addEventListener(‘touchstart‘,function(e){

      startY = e.touches[0].clientY;

})

left.addEventListener(‘touchmove‘,function(e){

     moveY = e.touches[0].clientY;

     distY = moveY - startY;

//如果當前滾動位置在最大的滾動範圍內，允許滾動

if(curDistY + distY < maxScrollDown && curDistY + distY > maxScrollUp){

     //正常範圍內無動效

      ul.style.transition  = "none" ;

      ul.style.transform = "translateY("+(disY+curDisY)+“px)";

}

})

left.addEventListener(‘touchend‘,function(e){

      //記錄當前ul的滾動位置

     curDistY = curDistY + distY ;

     //如果當前滾動位置超過範圍則設定正常範圍

     if(curDistY > normalScrollDown){

         curDistY  = normalScrollDown;

         //增加動畫效果

         ul.style.transition = "all 0.4s";

         ul.style.transform = "translateY("+(curDisY)+“px)";

      }

      if(curDistY < normalScrollUp){

         curDistY  = normalScrollUp;

         ul.style.transition = "all 0.4s";

         ul.style.transform = "translateY("+(curDisY)+“px)";

      }

})

}

 

*****************************************************************************************

    使用物件導向封裝一個上下復原的函數

 

/**
* Created by zhousg on 2016/3/18.
*/
/**
* @author zhousg
* @Date 2016-02-04
* @Method 滑動方法 針對一個大容器內部的容器做滑動封裝
* @param args args.swipeDom 大容器物件 args.swipeType 滑動類型 args.swipeDistance 緩衝距離
* 注意：子容器的高寬度是取的內容的高寬 所以padding的大小有影響
*/
if(!window.itcast){
window.itcast = {};
}
itcast.iScroll = function(args){
/*調用的時候沒有初始化的話就是初始化一次*/
if(!(this instanceof arguments.callee)) return new arguments.callee(args);
this.init(args);
};
itcast.iScroll.prototype = {
constructor:itcast.iScroll,
init:function(args){
/*局部變數來接受當前的this*/
var that = this;
/*如果傳入的對象是一個Dom對象就把他看作是我們的大容器盒子*/
if(args.swipeDom && typeof args.swipeDom == ‘object‘){
that.parentDom = args.swipeDom;
}
/*如果不存在父容器就停止初始化*/
if(!that.parentDom) return false;
/*找到子容器*/
that.childDom = that.parentDom.children&&that.parentDom.children[0]?that.parentDom.children[0]:‘‘;
/*如果不存在子容器就停止初始化*/
if(!that.childDom) return false;
/*初始化傳入的參數*/
that.settings = {};
/*預設類型 預設的Y軸滑動 如果不是y的話就是以x軸開始滑動*/
that.settings.swipeType = args.swipeType?args.swipeType:‘y‘;
/*預設的緩衝滑動距離*/
that.settings.swipeDistance = args.swipeDistance>=0?args.swipeDistance:150;
/*初始化滑動*/
that._scroll();
},
/*對外開放的設定定位的方法*/
setTranslate:function(translate){
this.currPostion = translate;
this._addTransition();
this._changeTranslate(this.currPostion);
},
_addTransition:function(){
this.childDom.style.transition = "all .2s ease";
this.childDom.style.webkitTransition = "all .2s ease";/*相容 老版本webkit核心瀏覽器*/
},
_removeTransition:function(){
this.childDom.style.transition = "none";
this.childDom.style.webkitTransition = "none";/*相容 老版本webkit核心瀏覽器*/
},
_changeTranslate:function(translate){
if(this.settings.swipeType == ‘y‘){
this.childDom.style.transform = "translateY("+translate+"px)";
this.childDom.style.webkitTransform = "translateY("+translate+"px)";
}else{
this.childDom.style.transform = "translateX("+translate+"px)";
this.childDom.style.webkitTransform = "translateX("+translate+"px)";
}
},
_scroll:function(){
/*局部變數來接受當前的this*/
var that = this;
/*滑動的類型*/
var type = that.settings.swipeType == ‘y‘?true:false;
/*父容器的高度或寬度*/
var parentHeight = type?that.parentDom.offsetHeight:that.parentDom.offsetWidth;
/*子容器的高度或寬度*/
var childHeight = type?that.childDom.offsetHeight:that.childDom.offsetWidth;

/*子容器沒有父容器大的時候*/
if(childHeight < parentHeight){
if(type){
that.childDom.style.height = parentHeight + ‘px‘;
childHeight = parentHeight;
}else{
that.childDom.style.width = parentHeight + ‘px‘;
childHeight = parentHeight;
}
}

/*緩衝距離*/
var distance = that.settings.swipeDistance;
/*區間*/
/*左側盒子定位的區間*/
that.maxPostion = 0;
that.minPostion = -(childHeight-parentHeight);
/*設定滑動的當前位置*/
that.currPostion = 0;
that.startPostion = 0;
that.endPostion = 0;
that.movePostion = 0;
/*1.滑動*/
that.childDom.addEventListener(‘touchstart‘,function(e){
/*初始的Y的座標*/
that.startPostion = type?e.touches[0].clientY: e.touches[0].clientX;
},false);
that.childDom.addEventListener(‘touchmove‘,function(e){
e.preventDefault();
/*不停的做滑動的時候記錄的endY的值*/
that.endPostion = type?e.touches[0].clientY: e.touches[0].clientX;
that.movePostion = that.startPostion - that.endPostion;/*計算了移動的距離*/

/*2.滑動區間*/
/*就是滑動區間*/
if((that.currPostion-that.movePostion)<(that.maxPostion+distance)
&&
(that.currPostion-that.movePostion)>(that.minPostion -distance)){
that._removeTransition();
that._changeTranslate(that.currPostion-that.movePostion);
}
},false);
window.addEventListener(‘touchend‘,function(e){
/*在限制滑動區間之後 重新計算當前定位*/
/*判斷是否在我們的合理定位區間內*/
/*先向下滑動 */
if((that.currPostion-that.movePostion) > that.maxPostion){
that.currPostion = that.maxPostion;
that._addTransition();
that._changeTranslate(that.currPostion);
}
/*想上滑動的時候*/
else if((that.currPostion-that.movePostion) < that.minPostion){
that.currPostion = that.minPostion;
that._addTransition();
that._changeTranslate(that.currPostion);
}
/*正常的情況*/
else{
that.currPostion = that.currPostion-that.movePostion;
}
that._reset();
},false);

},
_reset:function(){
var that = this;
that.startPostion = 0;
that.endPostion = 0;
that.movePostion = 0;
}
};

 

如何使用：

     1、先引入

     2、調用

    itcast.isScroll({

          //擷取滾動元素的父級

         swipeDom: document.querySelector(‘.content‘),

           //如果是橫向滾動 x,縱向滾動 y 

          swipeType:‘y‘,

          //回彈距離

          swipeDistance: 100

}) 

*****************************************************************************************

2） 封裝移動端點擊事件

因為click事件在移動端有300ms的延遲

需求： 

    1、事件的發生時間要在150ms以內

    2、沒有觸發 touchmove 事件

function tap(dom,callback){

     var isMove = false;

     var startTime = 0 ; 

      dom.addEventListener(‘touchstart‘,function(){

            //返回當前事件的毫秒數

           startTime = Date.now();

})

       dom.addEventListener(‘touchmove‘,function(){

            isMove = true;

 })

       dom.addEventListener(‘touchend‘,function(){

              if(!isMove && Date.now()-startTime < 150){

                      callback && callback();

              }

              isMove= false;

              startTime = 0;

 })

}

移動端動效