H5仿高德，百度地图首页伸缩面板，记录一下

r囧r小猫 2022-12-02 15:30 186阅读 0赞

<!DOCTYPE html>

<html lang="en">

<head>

<title>Insert title here</title>

</head>

<body>

<a class="easyui-linkbutton" οnclick="hideAndShowSlideBoard();"><b>面板</b></a>

<div id="slideBoard"

style="overflow:hidden;background-color: \#330fff;  left: 0px;bottom: 0; width: 100%;height: 25%; position: absolute; display: none;"

οnmοusedοwn="mouseDown(this,event)">

</div>

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);

</script>

</body>

</html>

H5仿高德，百度地图首页伸缩面板，记录一下

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关移动端h5页面通过地址调起高德地图、百度地图定位导航

相关工业项目首页百度地图

相关 H5仿高德，百度地图首页伸缩面板，记录一下

相关仿百度首页HTML和CSS,仿百度首页

相关仿百度地图街景实现

相关 html仿百度首页

相关 Android 仿百度手机助手首页滑动效果

相关地图相关-百度-高德相互转换

相关百度地图记录

相关仿百度页面，实现百度一下js部分代码