博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
ArcGIS Engine 中的绘制与编辑
查看>>
Oracle--通配符、Escape转义字符、模糊查询语句
查看>>
c# 文件笔记
查看>>
第一页 - 工具的使用(webstorm)
查看>>
Linux 进程资源用量监控和按用户设置进程限制
查看>>
IE浏览器整页截屏程序(二)
查看>>
D3.js 之 d3-shap 简介(转)
查看>>
制作满天星空
查看>>
类和结构
查看>>
CSS3选择器(二)之属性选择器
查看>>
adidas crazylight 2018 performance analysis review
查看>>
typeset shell 用法
查看>>
python 之 循环语句
查看>>
心得25--JDK新特性9-泛型1-加深介绍
查看>>
[转]ceph网络通信模块_以monitor模块为例
查看>>
HDOJ 1754 I Hate It(线段树基本操作)
查看>>
latex tree
查看>>
安装NVIDIA驱动时禁用自带nouveau驱动
查看>>
HDU-1255 覆盖的面积 (扫描线)
查看>>
css3学习01
查看>>