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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
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';
});
</script>
<script type="text/javascript" src="js/index.js"></script>
<title>投诉</title>
<style type="text/css">
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;
}
</style>
<script>
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;
});
}
</script>
</head>
<body style="background-color: rgb(39,43,46);margin:0;padding:0">
<div style="position:absolute;z-index:1;top:17px;font-size:14px;height:25px; line-height:25px; text-align:center; width:100%;color:rgb(105,106,108); font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;">
此网页由 weixin110.qq.com 提供
</div>
<div id="container" style="position: absolute; z-index: 2; background-color: rgb(255, 255, 255); width: 100%; height: 100%; transition: all 0s; transform: translate(0px, 0px);">
<!-- <div style="width:100%;height:100%">
内容内容
</div> -->
</div>
</body>
</html>
