基本信息
源码名称:仿移动端手势滑动插件
源码大小:5.11KB
文件格式:.js
开发语言:js
更新时间:2016-12-09
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):78630559
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
//手势滑动
(function($) {
$.fn.move = function(setti) {
var defaultSetti = {
width: 200, //实际显示区域
height: 200, //实际显示区域
x: true, // 横向移动
y: true, //纵向移动
}
setti = $.extend(true, {}, defaultSetti, setti);
return this.each(function() {
var _this = $(this),
s = setti;
var chil = $(".Slide", _this); //触控元素
var startX = 0,
startY = 0; //触摸开始时手势横纵坐标
var temPos = []; //元素当前位置
var oPosition = {}; //触点位置
var wh = []; //元素宽高
var z = 0; //手指滑动时间
var d = {}; //总过滑动距离
var m = 0; //每毫秒滚动距离
//页面加载或发生改变
$(window).bind('resize load', function() {
b();
wh.w = chil.width();
wh.h = chil.height();
if(wh.w < s.width) {
s.width = wh.w
}
if(wh.h < s.height) {
s.height = wh.h
}
});
if(_this.css("position") == "static") { //检测是否定位
_this.css("position", "relative")
}
//获取滑动时间
function autoMo() {
z ;
}
//停止计算
function b() { //绑定三个事件
chil.get(0).addEventListener("touchstart", c, false)
chil.get(0).addEventListener('touchmove', y, false);
chil.get(0).addEventListener('touchend', t, false);
}
function h(e) { //获取触摸点
var touches = e.changedTouches,
l = touches.length,
touch, tagX, tagY;
for(var i = 0; i < l; i ) {
touch = touches[i];
tagX = touch.clientX;
tagY = touch.clientY;
}
oPosition.x = tagX;
oPosition.y = tagY;
if(!z) {
d.x = tagX;
d.y = tagY;
}
}
function c(e) { //触摸开始
h(e);
startX = oPosition.x;
startY = oPosition.y;
temPos.x = chil.position(_this).left;
temPos.y = chil.position(_this).top;
animate(chil,0);
}
function y(e) { //触摸移动
e.preventDefault();
h(e);
autoMo();
var moveX = oPosition.x - startX;
var moveY = oPosition.y - startY;
if(s.x) {
chil.css({
left: temPos.x moveX
});
}
if(s.y) {
chil.css({
top: temPos.y moveY
});
}
}
function t(e) { //触摸结束
temPos.x = chil.position().left;
temPos.y = chil.position().top;
if(s.x) {
var wwl = (d.x - oPosition.x) / z*20;
_left(chil,wwl);
}
if(s.y) {
var wwt = (d.y - oPosition.y) / z*20;
_top(chil,wwt);
}
z = 0; //初始化触控时间
}
function animate(obj, num) {
clearInterval(obj.timer);
clearInterval(obj.timers);
if(!num){
return;
}
}
function _top(obj,num){
clearInterval(obj.timer);
if(!num){
return;
}
var ti=0;
if(num>0){
obj.timer = setInterval(function() {
var flag = true; //清楚定时器的标识
var step = num / 20;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.css("top",temPos.y - step - ti);
ti=ti step;
num=num-step;
if(num<0 || -temPos.y step ti > wh.h - s.height){
clearInterval(obj.timer);
}
if(-temPos.y - step - ti > wh.h - s.height){
doAnimt(-wh.h s.height)
}
}, 10)
}else{
obj.timer = setInterval(function() {
var step = num / 20;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.css("top",temPos.y - step - ti);
ti=ti step;
num=num-step;
if(num>0 || temPos.y - step - ti > 0){
clearInterval(obj.timer);
}
if(temPos.y - step - ti > 0){
doAnimt(0)
}
}, 10)
}
}
function _left(obj,num){
clearInterval(obj.timers);
if(!num){
return;
}
var til=0;
if(num>0){
obj.timers = setInterval(function() {
var stepl = num / 20;
stepl = stepl > 0 ? Math.ceil(stepl) : Math.floor(stepl);
obj.css("left",temPos.x - stepl - til);
til=til stepl;
num=num-stepl;
if(num<0 || -temPos.x stepl til > wh.w - s.width){
clearInterval(obj.timers);
}
if(-temPos.x - stepl - til > wh.w - s.width){
doAniml(-wh.w s.width)
}
}, 10)
}else{
obj.timers = setInterval(function() {console.log(num);
var stepl = num / 20;
stepl = stepl > 0 ? Math.ceil(stepl) : Math.floor(stepl);
obj.css("left",temPos.x - stepl - til);
til=til stepl;
num=num-stepl;
if(num>0 || temPos.x - stepl - til > 0){
clearInterval(obj.timers);
}
if(temPos.x - stepl - til > 0){
doAniml(0)
}
console.log(num);
}, 10)
}
}
function doAnimt(iTarget) {
chil.animate({
top: iTarget
}, {
duration: 300,
queue: false
});
}
function doAniml(iTarget) {
chil.animate({
left: iTarget
}, {
duration: 300,
queue: false
});
}
try {
if(typeof(eval(_data)) == "function") {
_data(); //可用于传输内部数据
}
} catch(e) {}
});
}
})(jQuery);