博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端滑动函数 (防止滑动时将隐藏部分显示)
阅读量:5268 次
发布时间:2019-06-14

本文共 5109 字,大约阅读时间需要 17 分钟。

  • 0件已参团
    5555.00
  •                   
  • 0件已参团
    2545.00
//滑动函数     function SlideHorizontal(id ){         this.id = id;         this.startX = 0;         this.moveX = 0;         this.endX = 0;         this.startMarginLeft = 0;         this.speed = 0;         this.moveHappen = false;         this.vertical = 0;         this.mouseStart = false;         var scope = this;         $("#" + this.id).on("touchstart",function(e){             scope.mouseStart = true;             touchStartFn(e);         });         $("#" + this.id).on("mousedown",function(e){             scope.mouseStart = true;             touchStartFn(e);         });         $("#" + this.id).on("touchmove",function(e){             touchMoveFn(e);         });         $("#" + this.id).on("mousemove",function(e){             touchMoveFn(e);         });         $("#" + this.id).on("touchend",function(e){             scope.mouseStart = false;             touchEndFn(e);         });         $("#" + this.id).on("mouseup",function(e){             scope.mouseStart = false;             touchEndFn(e);         });         function touchStartFn(e){             if (e.clientX) {                 scope.moveX = scope.startX = e.clientX;                 scope.startY = e.clientY;             }else{                 var touch = e.originalEvent.changedTouches[0];                 scope.moveX = scope.startX = touch.clientX;                 scope.startY = touch.clientY;             }             scope.moveHappen = false;             scope.startMarginLeft = parseFloat($("#" + scope.id).css("marginLeft"));         }         function touchMoveFn(e){             if (scope.mouseStart) {                 if (e.clientX) {                     scope.speed = e.clientX - scope.moveX;                     scope.moveX = e.clientX;                     scope.speedY = e.clientY - scope.startY;                 }else{                     var touch = e.originalEvent.changedTouches[0];                     scope.speed = touch.clientX - scope.moveX;                     scope.moveX = touch.clientX;                     scope.speedY = touch.clientY - scope.startY;                 }                 if (scope.vertical !== 2 && scope.vertical !== 1) {                     if (Math.abs(scope.speedY) > Math.abs(scope.speed)) {                         scope.vertical = 1;                     }else{                         scope.vertical = 2;                         scope.moveHappen = true;                     }                 }                 if (scope.vertical === 2) {                     e.preventDefault();                     var dx = scope.moveX - scope.startX;                     var marginLeft = scope.startMarginLeft + dx;                     if (marginLeft > 50) {                         marginLeft = 50;                     }                     if (marginLeft < -moreLength - 50) {                         marginLeft = -moreLength - 50;                     }                     $("#" + scope.id).css({                         "margin-left" : marginLeft                     });                     scope.time1 = (new Date()).getTime();                 }             }         }         function touchEndFn(e){             if (e.clientX) {                 scope.endX = e.clientX;             }else{                 var touch = e.originalEvent.changedTouches[0];                 scope.endX = touch.clientX;             }             scope.time2 = (new Date()).getTime();             if (scope.time2 - scope.time1 > 20) {                 scope.speed = 0;             }             //console.log(scope.time2 - scope.time1);             var marginLeft = parseFloat($("#" + scope.id).css("margin-left")) + scope.speed*20;             if (scope.moveHappen && scope.vertical === 2) {                 if (marginLeft > 0) {                     $("#" + scope.id).animate({                         "margin-left" : 0                     },200,"linear");                 }else if (marginLeft < -moreLength) {                     $("#" + scope.id).animate({                         "margin-left" : -moreLength                     },200,"linear");                 }else{                     $("#" + scope.id).animate({                         "margin-left" : marginLeft                     },200,"linear");                 }             }             scope.vertical = 0;         }     };     new SlideHorizontal("goodsUl");

 

转载于:https://www.cnblogs.com/lst619247/p/8794012.html

你可能感兴趣的文章
SVN服务器搭建和使用(二)
查看>>
[转]Tesseract 3.02中文字库训练
查看>>
[转载]表单校验之datatype
查看>>
mysql创建数据库
查看>>
HTML中在a标签中添加onclick事件
查看>>
金融基础知识 - 第二章
查看>>
GLOBAL TEMPORARY小介绍
查看>>
cin作为判断条件时(关于cin的理解)
查看>>
@Controller 和 @RestController 区别
查看>>
mysql缓存
查看>>
大数据hadoop生态圈
查看>>
sublime设置缩进空格
查看>>
package的使用
查看>>
40. Combination Sum II
查看>>
一个关于python定制类的例子
查看>>
软件测试:第一次作业(软件测试理解)
查看>>
第一天会议博客
查看>>
第八周作业
查看>>
杂谈:HTML 5页面可视性API
查看>>
poj 3041 Asteroids(最小点覆盖)
查看>>