(function (window, document, $, undefined) {
"use strict";
var startPoint,
$currentEl,
$fixEl,
moving = false,
$rootEl = $(document.documentElement),
openSwipeEl = null;
function touchMove(event) {
var touch = event.touches[0],
diffX = touch.clientX - startPoint.x,
diffY = Math.abs(touch.clientY - startPoint.y),
fixElWidth = $fixEl.width(),
translated,
translatedLeft = ($currentEl.data("translatedLeft") || 0) + diffX;
if (translatedLeft > 0) {
translatedLeft = translatedLeft / 10;
} else if (translatedLeft < -fixElWidth) {
translatedLeft = -fixElWidth;
}
$currentEl.data("isShow", translatedLeft < -fixElWidth * 0.5);
translated = "translate3d(" + translatedLeft + "px,0,0)";
// 阻止默认行为,用于修复android4下不会触发touchend事件的bug,针对android且为左滑状态时,才阻止默认事件
if($$.isAndroid() && diffX < -5 && diffY < 5){
$currentEl.css({
"-webkit-transform": translated,
transform: translated
});
event.preventDefault();
}else if(!$$.isAndroid()){
$currentEl.css({
"-webkit-transform": translated,
transform: translated
});
}
openSwipeEl = $currentEl;
}
function touchEnd(event) {
$rootEl.off("touchmove", touchMove);
$rootEl.off("touchend", touchEnd);
$rootEl.off("touchcancle", touchEnd);
moving = false;
if (null === event) {
return;
}
var translatedLeft = $currentEl.data("translatedLeft"),
fixElWidth = $fixEl.width(),
translated,
halfFixElWidth = fixElWidth / 2;
if ($currentEl.data("isShow")) {
translatedLeft = -fixElWidth;
openSwipeEl = $currentEl;
} else {
translatedLeft = 0;
openSwipeEl = null;
}
$currentEl.data("translatedLeft", translatedLeft);
translated = translatedLeft ? "translate3d(" + translatedLeft + "px,0,0)" : "";
$currentEl.css({
"-webkit-transform": translated,
transform: translated
});
$currentEl.addClass('anim');
}
function touchStart(event) {
var touches = event.touches;
$currentEl = $(event.currentTarget);
$fixEl = $currentEl.children("*[data-swipe-item-fixel]");
if (touches.length > 1) {
return;
}
startPoint = {
x: touches[0].clientX,
y: touches[0].clientY
};
$currentEl.removeClass('anim');
$rootEl.on("touchmove", touchMove);
$rootEl.on("touchend", touchEnd);
$rootEl.on("touchcancle", touchEnd);
}
$.fn.swipeMenu = function () {
var $el = $(this);
$el.delegate("*[data-swipe-item]", "touchstart", touchStart);
};
function hideSwipe() {
var translated = "";
//openSwipeEl = $("*[data-swipe-item]");
if (openSwipeEl) {
openSwipeEl
.css({
"-webkit-transform": translated,
transform: translated
})
.data("isShow", 0)
.data("translatedLeft", 0);
openSwipeEl = null;
}
}
$(document).delegate('body', 'touchstart', function () {
hideSwipe();
});
//$('body').delegate('*[data-swipe-item]', 'touchstart', function () {
// //var transform = this.style.webkitTransform;
//
// //if (!transform || transform == 'translate3d(0px, 0px, 0px)') {
// hideSwipe();
// //} else {
//
// //}
//});
}(window, document, Zepto));
相关推荐
reading-zepto, 读 Zepto 源码,分析 Zepto 源码
JS框架中的zepto框架,是一款轻量级框架,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件
显示7天的日历,利用左右箭头切换7天的日期,直至切换到指定的开始时间与结束时间,默认显示当前日期所在周
zepto.js手机端网页上下手指滑动图片切换效果代码,兼容各种手机屏幕实现音乐播放,图片上下滑动。
wlt-zepto 构建一个 webpack 版本的 zepto 对于原始的 Zepto,它在这里安装 npm install wlt-zepto用法 var Zepto = require ( 'wlt-zepto' ) ;
懒加载-zepto 一个使 imgs 懒惰加载 zepto 的插件
zepto手机端快捷环形导航菜单特效代码,非常不错的JS导航菜单特效,基于zepto实现,效果很不错点击展开菜单再点击隐藏菜单,菜单固定在页面,页面滚动菜单位置不变,很适合放些快捷功能按钮如打电话、发短信等功能...
nd-zepto mobile $ library 安装 $ spm install nd-zepto --save 使用 var Zepto = require('nd-zepto'); // use Zepto 开发 本地 Web 服务 grunt 浏览器中访问 生成/查看 API 文档 grunt doc grunt 浏览器中访问 ...
新zepto 使用延迟构建 zepto 的浏览器版本 对于原始的 Zepto,它在这里 安装 npm install neo-zepto 用法 var Zepto = require ( 'neo-zepto' ) ;
仅供个人学习记录。 通过重新键入代码,将 zepto 的提交形成初始版本。 第一部分是 v0.1 的提交:
zepto.js手机移动端城市选择插件代码是一款移动端无需选择省份,即可选择城市代码。
实现效果: 如今非常流行的HTML5页面展现形式,特别是在一些微信应用... 方式大都采用如此方式,今天我们提供大家一款这种页面特效,支持手机端触屏向上滑动,页面非 常流畅,基于zepto,轻量级框架,大家可以看看。
最近做webAPP应用用到一些touch事件,找了很多touch的库(包括zepto的touch模块),在手机上测试都是有各种各样的问题,要么就滑不动,要么只能左右滑动不能上下滑动等,终于找到一个好用强大的touch库,但是只有...
zepto手机端日期时间选择代码是一款带星期的日期和时间选择器插件。
下面这个系列是官方源码编译的,可以方便测试代码 zepto1.js模块包括zepto事件ajax zepto2.js模块包括zepto事件ajax回调被推迟 zepto3.js模块包括Zepto事件fx fx_meshods zepto.js上面所有模块的集合注:执行的...
Web_使用pinchzoom插件实现图片手势缩放. 效果描述: 一个基于jQuery的插件——Pinchzoom.js 可以实现移动网页中的图片放大或者缩小,用手指控制即可 当然,其中的jQuery完全可以换成zepto.js
定制Zepto构建 我们为正式Zepto添加以下事实 添加所需的模块,包括zepto event ajax form ie detect fx fx_methods data selector touch gesture 删除窗口全局变量 添加浏览器支持
Swiper-master是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,...
zepto手机操作提示框图标动画插件是一款实用的提示框插件制作手机端操作弹出提示框图标动画效果代码。
看了看zepto的原始码,稍稍注释