H5仿高德，百度地图首页伸缩面板，记录一下
style="overflow:hidden;background-color: #330fff; left: 0px;bottom: 0; width: 100%;height: 25%; position: absolute; display: none;" οnmοusedοwn="mouseDown(this,event)">
var countClick = 0; //按钮点击次数
var initRate = 0.75; // 滑动面板初始显示比例
var mobileOldY = 0; //手机端记录初始点击y轴的值
var moblieTop = 0; //记录初始点击时滑板的top值
var mobileOldTIME = new Date().getTime();//记录初始点的时间
//PC阻止滚动条
//document.documentElement.style.overflowY = 'hidden';
var slideBoard = document.getElementById('slideBoard');
slideBoard.style.top = Math.ceil($(window).height() * initRate) + "px";
slideBoard.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";
document.addEventListener('touchstart', touchStart);
//滑动开始事件 mobile
function touchStart(e) {
console.log(1111);
if (countClick == 1 && e.touches[0].clientY >= parseInt(slideBoard.style.top)) {
mobileOldY = e.touches[0].clientY;
moblieTop = parseInt(slideBoard.style.top);
mobileOldTIME = new Date().getTime();
document.addEventListener('touchmove', touchMove);
document.addEventListener('touchend', touchEnd);
}
}
function touchMove(e) {
e.preventDefault();
var y = e.touches[0].clientY - mobileOldY;
slideBoard.style.top = moblieTop + y + "px";
slideBoard.style.height = $(window).height() - y - moblieTop + "px";
if (parseInt(slideBoard.style.top) < 0) {
slideBoard.style.top = 0;
}
if (parseInt(slideBoard.style.top) > Math.ceil($(window).height()
* initRate)) {
slideBoard.style.top = Math.ceil($(window).height() * initRate) + "px";
slideBoard.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";
}
}
function touchEnd(e) {
document.removeEventListener('touchmove', touchMove);
document.removeEventListener('touchend', touchEnd);
var dist = mobileOldY - e.changedTouches[0].clientY;
var time = new Date().getTime() - mobileOldTIME;
if (dist / time > 0.5) {
moveSlideBoardTo(2);
return;
}
if (dist / time < -0.5) {
moveSlideBoardTo(0);
return;
}
if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.1)) {
moveSlideBoardTo(2);
} else if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.5)) {
moveSlideBoardTo(1);
} else {
moveSlideBoardTo(0);
}
}
//滑动开始事件 PC
function mouseDown(obj, evt) {
var oldY = evt.clientY;
var top = parseInt(obj.style.top);
mobileOldTIME = new Date().getTime();
document.onmousemove = function (evt) {
var y = evt.clientY - oldY;
obj.style.top = top + y + "px";
obj.style.height = $(window).height() - top - y + "px";
if (parseInt(obj.style.top) < 0) {
obj.style.top = 0;
}
if (parseInt(obj.style.top) > Math.ceil($(window).height()
* initRate)) {
obj.style.top = Math.ceil($(window).height() * initRate) + "px";
obj.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";
}
}
// input.value = Math.ceil(parseInt(obj.style.left) / 400 * 1000);
document.onmouseup = function (evt) {
document.onmouseup = null;
document.onmousemove = null;
var dist = oldY - evt.clientY;
var time = new Date().getTime() - mobileOldTIME;
if (dist / time > 0.5) {
moveSlideBoardTo(2);
return;
}
if (dist / time < -0.5) {
moveSlideBoardTo(0);
return;
}
if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.1)) {
moveSlideBoardTo(2);
} else if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.5)) {
moveSlideBoardTo(1);
} else {
moveSlideBoardTo(0);
}
}
}
//点击设置隐藏 或者 显示滑动面板
function hideAndShowSlideBoard() {
var slideBoard2 = document.getElementById('slideBoard');
slideBoard2.style.top = Math.ceil($(window).height() * initRate) + "px";
slideBoard2.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";
if (countClick == 0) {
slideBoard2.style.display = 'block';
countClick = 1;
return;
}
if (countClick == 1) {
// slideBoard2.style.display = 'none';
countClick = 0;
return;
}
}
var loopCount = 0;
var loopID;
//移动滑板到某位置 mobile PC
function moveSlideBoardTo(location) {
var moveTime = 100;
var moveIntervalTime = 10;
var locationRate = 1;
var rate = moveTime / moveIntervalTime;
loopCount = 0;
if (location == 0) {
locationRate = 0.25;
} else if (location == 1) {
locationRate = 0.75;
} else {
locationRate = 1;
}
if (Math.ceil((1 - locationRate) * $(window).height()) == parseInt(slideBoard.style.top)) {
return;
} else if (Math.ceil((1 - locationRate) * $(window).height()) < parseInt(slideBoard.style.top)) {//需要上升
var dist = parseInt(slideBoard.style.top) - (1 - locationRate) * $(window).height();
var perdist = Math.ceil(dist / rate);
loopID = setInterval("moveUp(" + perdist + "," + rate + "," + locationRate + ")", moveIntervalTime);
} else {//下降
var dist = (1 - locationRate) * $(window).height() - parseInt(slideBoard.style.top);
var perdist = Math.ceil(dist / rate);
loopID = setInterval("moveDown(" + perdist + "," + rate + "," + locationRate + ")", moveIntervalTime);
}
}
//上移函数
function moveUp(perdist, rate, locationRate) {
if (loopCount != rate) {
slideBoard.style.top = parseInt(slideBoard.style.top) - perdist + "px";
slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
loopCount = loopCount + 1;
} else {
slideBoard.style.top = Math.ceil((1 - locationRate) * $(window).height()) + "px";
slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
clearInterval(loopID);
}
}
//下移函数
function moveDown(perdist, rate, locationRate) {
if (loopCount != rate) {
slideBoard.style.top = parseInt(slideBoard.style.top) + perdist + "px";
slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
loopCount = loopCount + 1;
} else {
slideBoard.style.top = Math.ceil((1 - locationRate) * $(window).height()) + "px";
slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
clearInterval(loopID);
}
}