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

最新推荐文章于 2024-04-30 16:59:14 发布
最新推荐文章于 2024-04-30 16:59:14 发布
阅读量1.2k 收藏 4
点赞数 2
分类专栏： 小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwf1225/article/details/108333410
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="./js/jquery.panelslider.min.js"></script>


 

    <script type="text/javascript">

 

        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>

wwf1225
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
视频教程-仿百度地图app，js制作H5中的滑动面板-jQuery
weixin_33353634的博客
05-28 310
仿百度地图app，js制作H5中的滑动面板 主讲实战实例，从逻辑到代码详细讲...
js仿百度地图放大缩小拖拽查看效果
02-25
js实现地图效果，实现地图拖拽、大小缩放，地图放大，地图缩小，地图拖动
高德地图+HTML+点击事件+自定心信息窗体
最新发布
pursue.dreams的博客
04-30 737
【代码】高德地图+HTML+点击事件+自定心信息窗体。
仿百度地图app，js制作H5中的滑动面板
06-15
实战实例使用js制作H5的滑动面板，仿照移动端APP百度地图点击地点后弹出的滑动面板，代码可以直接使用，并且已经实现组件化，视频对代码有详细的讲解，逻辑与分析的讲解，提供全部代码的下载。 对于有类似开发需求的朋友，可以直接使用代码或者在此基础上进行修改，节省大量时间。 讲解功能设计思维与方法，提供解决问题的能力。程序员必备。
实战HTML：模仿百度地图制作项目首页
KaiSarH
07-09 846
模仿百度地图制作项目首页
仿百度图片首页--HTML+CSS练手项目1【Table】
weixin_30576827的博客
07-06 475
【本文为原创，转载请注明出处】 技术【CSS+HTML】 布局【Table】 图片准备【百度图标、10张不同类型图】 ------------------------------------------------------------------------------------------------------------ 步骤1 table 布局 ...
移动端上滑显示更多内容
06-01
移动端上滑显示更多内容,类似高德地图首页，该插件仅支持移动端，不支持PC端
仿百度图片实例
QTFYING的博客
05-05 754
昨天花了一天时间做了一个类似于百度图片的切换功能，同时呢，考虑浏览器性能上为题做了一些向下兼容：首先我们建一个index.html文件，代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实战</title> <script src="js/app.js"></script> <scri
在uniapp做高德地图，发布为h5网页
11-14
在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息
百度地图H5地图选址
12-23
【百度地图H5地图选址】是一项利用JavaScript和jQuery技术在H5页面中实现类似饿了么地址选择的功能。这项技术可以让用户在网页上方便地进行地理位置的筛选和选择，为在线服务提供更精确的配送或服务范围设定。下面将...
仿高德地图源码
01-29
android 高德地图 源码 界面 新手开发必备
图片活地图浏览，可支持拖拽和滚动放大缩小
06-19
本代码图片活地图浏览，可支持拖拽和滚动放大缩小
高仿百度地图APP
03-21
该APP是一款高仿百度地图的APP，它具有基本地图功能，定位功能，全景显示功能，语音播报导航功能等功能，并且整体的地图的界面都是仿照现在百度地图的APP来设计的。
小程序版高德地图完美运行demo
08-09
小程序版高德地图完美运行demo，1:小程序增加域名白名单https://restapi.amap.com，2修改app.js内的key为你设置的，完美运行
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
06-10
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽、div拖拽等
使用h5百度地图定位
07-18
使用h5，js,百度api实现百度地图定位； 显示当前所在位置； 显示打卡范围； 计算与打卡地点距离。
html5唤醒百度高德地图,H5内唤醒百度、高德APP
weixin_36329425的博客
07-01 1171
前几天，联合黑卡反馈了一个需求，需要在H5中打开百度APP或者是高德APP，于是我在网上查了相关文档，下面放上链接： 1.高德地图 2.百度地图具体思路就是点击选择地图的时候，先去请求APP链接，800毫秒后无响应，再跳转至H5链接。这样的做法有一点不好就是不管跳不跳APP，都会跳到H5的链接。有好的想法可以评论一下。下面放相关代码：function ToggleAppAndH5( AppUr...
仿百度地图滑动效果
qq_38822390的博客
05-16 938
需求：上拉导航条的时候，会加载出具体的数据信息； 上拉的位置高度由这些信息的条数决定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
一个仿百度地图底图切换的jquery插件
lengyuedaidai的博客
08-14 1496
mapTypeSelect 一个基于jquery的仿百度的地图底图切换工具 github地址 https://github.com/lengyuedaidai/mapTypeSelect 如何使用 引入css和js &lt;link href="css/mapTypeSelect.css" type="text/css" rel="stylesheet" /&gt;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值