常用代码集合

2019-02-27 10:55:07 阅读：278 来源： 互联网

标签：body 容器常用 off 代码 var touch touchmove 集合

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

标签：body,容器,常用,off,代码,var,touch,touchmove,集合
来源： https://blog.51cto.com/9161018/2355445

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

常用代码集合