常用代码集合

Posted 2021-02-11

一、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‘);
});

三、页面移动到对应位置开始执行动画

橙色容器从下方进入可视区域时(或者进入一段高度后)，容器内的动画播放。

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"
});