常用代碼集合

一、jquery返回頂部

$("html , body").animate({scrollTop: 0},'slow');

二、jQuery判斷移動端屏幕的滑動方向

$('body').on('touchstart', function(e) {
        var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;
        startY = touch.changedTouches[0].pageY;
        $('body').on('touchmove', function(e) {
                touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10) {
                        console.log("右劃");
                        showPrevious();
                        $('body').off('touchmove');
                } else if (touch.pageX - startX < -10) {
                        console.log("左劃");
                        showNext();
                        $('body').off('touchmove');
                };
                if (touch.pageY - startY > 10) {
                        console.log("下劃");
                        $('body').off('touchmove');
                } else if (touch.pageY - startY < -10) {
                        console.log("上劃");
                        $('body').off('touchmove');
                };
        });

        // Return false to prevent image
        // highlighting on Android
        return false;

}).on('touchend', function() {
        $('body').off('touchmove');
});

//改進版 手機移動端手指的上滑、下滑、左滑和右滑操作
$("body").on("touchstart", function(e) {
    e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
    e.preventDefault();
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,
    Y = moveEndY - startY;

    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
            alert("left 2 right");
    }
    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
            alert("right 2 left");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
            alert("top 2 bottom");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
            alert("bottom 2 top");
    }
    else{
            alert("just touch");
    }
});
var windowHeight = $(window).height(),
            $body = $("body");
$body.css("height", windowHeight);

三、js判斷移動端屏幕的滑動方向
//滑動處理

var startX, startY;
document.addEventListener('touchstart',function (ev) {
        startX = ev.touches[0].pageX;
        startY = ev.touches[0].pageY;
}, false);

document.addEventListener('touchend',function (ev) {
        var endX, endY;
        endX = ev.changedTouches[0].pageX;
        endY = ev.changedTouches[0].pageY;
        var direction = GetSlideDirection(startX, startY, endX, endY);
        switch(direction) {
                case 0:
                                alert("無操作");
                        break;
                case 1:
                        // 向上
                        alert("up");
                        break;
                case 2:
                        // 向下
                        alert("down");
                        break;

                default:
        }
}, false);

function GetSlideDirection(startX, startY, endX, endY) {
        var dy = startY - endY;
        //var dx = endX - startX;
        var result = 0;
        if(dy>0) {//向上滑動
                result=1;
        }else if(dy<0){//向下滑動
                result=2;
        }
        else
        {
                result=0;
        }
        return result;
}

四、頁面移動到對應位置開始執行動畫

橙色容器從下方進入可視區域時(或者進入一段高度後)，容器內的動畫播放。

var eTop=$(element).offset().top;//橙色容器距離整個頁面頂部的距離
var wTop=$(window).height();//綠色框可視區域的高度
window.onresize=funciton(){
var wTop=$(window).height();//縮放窗口這個高度會改變，需要再取得
}
$(window).scroll(funciont(){
  var dTop = $(document).scrollTop();//綠色框可視區域上面到黑色頁面頂部的距離，會實時改變
    //所以當橙色容器進入可視區域怎麼判斷?
    //放在scroll事件裏面
    if(dTop+wTop > eTop){//動畫播放事件}
});

就這樣，當可視區域上面的高度+可視區域高度>容器距離頂部高度，我們就知道容器進入【可視區底部】了
如果你想讓容器進入一段距離(比如100px)再觸發動畫？

//放在scroll事件裏面
if(dTop+wTop-100 > eTop){//動畫播放事件}

五、滾動條的啓用與禁止
//禁止滾動條

$(document.body).css({
 "overflow-x":"hidden",
 "overflow-y":"hidden"
});

//啓用滾動條
$(document.body).css({
 "overflow-x":"auto",
 "overflow-y":"auto"
});

六、移動端向上滑動獲取下一頁數據

上圖的用戶列表1代表的就是整個窗口的高度，2代表的是整個列表的高度（當然列表是可以上滑的） $(document)的值就是2加上頭部和底部的高度

var currentPage = 1;//初始化第一頁
/* 手機端向下滑動獲取數據 */
var scrollHeight;//記錄已經向上滑動的高度
$(window).scroll(function() {//當div向上滑動時便會執行或者這個方法
                //這是整個窗口的高度
                var windowHeight = parseFloat($(window).height());
                //列表滑動的高度
                scrollHeight = parseFloat($(window).scrollTop())
                var totalheight = windowHeight + scrollHeight;
                //$(document)代表的是列表的高度加上頭部底部的高度
                //如果$(document)的高度小於了窗口的高度加上滑動的高度
                if ($(document).height() <= totalheight) {
                        //如果flag是flase就不會繼續請求了，比如說請求到了最後一頁
                        if (flag) {
                                flag=false;
                                currentPage = currentPage + 1;
                                $("#page_tag_load").show(); 
                                //getRedemList()是獲取新的數據 currentPage 會加1
                                setTimeout('getRedemList(' + currentPage + ')', 1000);
                        }
                }
        }
});