1.滑动js
$(function () {
slide("#container", 0, function (e) {
var that = this;
setTimeout(function () {
that.back.call();
}, 0);
});
});
/*
*obj--滑动对象
*offset--滑动距离(当滑动距离大于等于offset时将调用callback)
*callback--滑动完成后的回调函数
*/
var slide = function (obj, offset, callback) {
var start,
end,
isLock = false,//是否锁定整个操作
isCanDo = false,//是否移动滑块
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
hasTouch = 'ontouchstart' in window && !isTouchPad;
//将对象转换为jquery的对象
obj = $(obj);
var objparent = obj.parent();
/*操作方法*/
var fn =
{
//移动容器
translate: function (diff) {
obj.css({
"-webkit-transform": "translate(0," + diff + "px)",
"transform": "translate(0," + diff + "px)"
});
},
//设置效果时间
setTranslition: function (time) {
obj.css({
"-webkit-transition": "all " + time + "s",
"transition": "all " + time + "s"
});
},
//返回到初始位置
back: function () {
fn.translate(0 - offset);
//标识操作完成
isLock = false;
}
};
//滑动开始
obj.bind("touchstart", function (e) {
if (objparent.scrollTop() <= 0 && !isLock) {
var even = typeof event == "undefined" ? e : event;
//标识操作进行中
isLock = true;
isCanDo = true;
//保存当前鼠标Y坐标
start = hasTouch ? even.touches[0].pageY : even.pageY;
//消除滑块动画时间
fn.setTranslition(0);
}
});
//滑动中
obj.bind("touchmove", function (e) {
if (objparent.scrollTop() <= 0 && isCanDo) {
var even = typeof event == "undefined" ? e : event;
//保存当前鼠标Y坐标
end = hasTouch ? even.touches[0].pageY : even.pageY;
if (start < end) {
even.preventDefault();
//消除滑块动画时间
fn.setTranslition(0);
//移动滑块
fn.translate(end - start - offset);
}
}
});
//滑动结束
obj.bind("touchend", function (e) {
if (isCanDo) {
isCanDo = false;
//判断滑动距离是否大于等于指定值
if (end - start >= offset) {
//设置滑块回弹时间
fn.setTranslition(0.5);
//保留提示部分
fn.translate(0);
//执行回调函数
if (typeof callback == "function") {
callback.call(fn, e);
}
} else {
//返回初始状态
fn.back();
}
}
});
}
2.页面及样式+进入js
navigator.__defineGetter__('userAgent', function() {
return 'Mozilla/5.0 (Linux; Android 4.4.4; HM NOTE 1LTEW Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36 MicroMessenger/6. 0.0.54_r849063.501 NetType/WIFI';
});
html,
body {
width: 100vw;
height: 100vh;
background-color: #efeff4;
font-family: '微软雅黑';
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
form,
dt,
dd,
input,
textarea,
th,
td,
fieldset,
legend,
dl,
dt,
dd,
figure {
margin: 0;
padding: 0;
}
header {
height: 12vw;
padding: 0 5vw;
font-size: 4vw;
line-height: 12vw;
color: #999;
}
a {
text-decoration: none;
}
p {
padding-left: 5vw;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
background: #fff;
color: #000;
}
p a {
display: block;
height: 12vw;
padding-right: 5vw;
font-size: 4.5vw;
line-height: 12vw;
border-bottom: 1px solid #d9d9d9;
color: #000;
}
p a:last-child {
border: 0;
}
p a img {
float: right;
height: 4vw;
margin: 4vw 0 0 0;
}
.other {
display: block;
height: 12vw;
padding: 0 5vw;
font-size: 4vw;
line-height: 12vw;
color: #0d7aff;
}
.footer {
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100vw;
height: 12vw;
text-align: center;
font-size: 4vw;
line-height: 12vw;
color: #0d7aff;
}
window.onload = function() {
stopDrop();
}
function stopDrop() {
var lastY; //最后一次y坐标点
$(document.body).on('touchstart', function(event) {
lastY = event.originalEvent.changedTouches[0].clientY; //点击屏幕时记录最后一次Y度坐标。
});
$(document.body).on('touchmove', function(event) {
var y = event.originalEvent.changedTouches[0].clientY;
var st = $(this).scrollTop(); //滚动条高度
if (y >= lastY && st <= 10) { //如果滚动条高度小于0,可以理解为到顶了,且是下拉情况下,阻止touchmove事件。
lastY = y;
event.preventDefault();
}
lastY = y;
});
}
此网页由 weixin110.qq.com 提供