2. 程式人生 > >仿百度地圖上拉下滑抽屜盒

仿百度地圖上拉下滑抽屜盒

阿新 • • 發佈：2019-01-20
$(function() { var isdrag = false; var NowTop = 0, flag = true, h = $(".wrap").height(), h1 = 0, h2 = $(".div2").position().top, moveY = 0, toTop = 0, disEndY=0, disY; var oDiv2 = document
.getElementById("div2"); oDiv2.addEventListener('touchstart', thismousedown); oDiv2.addEventListener('touchend', thismouseup); oDiv2.addEventListener('touchmove', thismousemove); $(oDiv2).css("top",($("body").height()-120)) function thismousedown(e) { // debugger isdrag = true
; disY = e.touches[0].pageY; if((disY-disEndY)>0){ if(h>$("body").height()){ moveY = $("body").height(); h-=$("body").height(); }else if(h<$("body").height()&&h>0){ moveY = h; h = $(".wrap"
).height(); } } return false; } function thismousemove(e) { var h=$(".wrap").height() if(isdrag) { var x = e.touches[0].pageY - disY; //向下滑動 if((e.touches[0].pageY - disY) > 0 && Math.abs(e.touches[0].pageY - disY) < 100) { if(Math.abs($(".div2").position().top-h2)>$("body").height()){ h1=$("body").height(); $(oDiv2).stop().animate({ top: "+="+h1+"px" }, 1000) }else{ $(oDiv2).stop().animate({ top: ($("body").height()-120)+"px" }, 1000) } flag=true return false; } // 向上滑動 if((e.touches[0].pageY - disY) < 0 && Math.abs(e.touches[0].pageY - disY) < 100) { if(flag){ $(oDiv2).stop().animate({ top: "-="+moveY+"px" }, 1000) if(moveY<$("body").height()){ flag=false h = $(".wrap").height(); } } return false; } } } function thismouseup(e) { isdrag = false; }; });

相關推薦

仿百度地圖上拉下滑抽屜盒

$(function() { var isdrag = false; var NowTop = 0, flag = true, h = $(".wrap").height(),

百度地圖上循環加標註

bmap marker 標註 for (var i = 0; i < RegionData.length; i++) { (function () { var icon = new BMap.Icon(‘../../assets/images/arrow_right.

js仿百度地圖拖拽、縮放、添加圖層功能（原創）

ets tle clas 火狐 相對 inner tlist posit css 最近項目中完成的需求，仿百度地圖中的功能： 要求：1.底層圖可以拖拽、縮放。 　　 2.拖拽一個圖標，在底層圖上對應位置添加一個標註點，該標註點位置要隨底層圖移動。 　　　3.添加的標註

【百度地圖】在百度地圖上框出邊界線

程式碼： 一、建立地圖 建立地圖物件；設立中心點以及地圖級別。 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 12); 二、新增地圖事件

Python3在百度地圖上求兩點座標

假設兩個點座標：    數學公式： 具體程式碼，以及以瀋陽中街地鐵口到東中街地鐵口為例。 import math def getDistance(longitude1,latitude1,longitude2,latitude2): #維度 la

js仿百度地圖拖拽、縮放、新增圖層功能（原創）

最近專案中完成的需求，仿百度地圖中的功能： 要求：1.底層圖可以拖拽、縮放。 　　    2.拖拽一個圖示，在底層圖上對應位置新增一個標註點，該標註點位置要隨底層圖移動。 　　　3.新增的標註點，可以拖動，刪除。 主要知識點和難點就是各個瀏覽器的點選、拖拽、縮放事件相容性，對js運動屬性、運動偏移位置的瞭解，

qt與js互動，並在百度地圖上繪製軌跡

前言： 獲得了照片的GPS資訊後，我們現在要做的就是把GPS資訊傳入JS中，然後通過百度地圖API將軌跡繪製出來。 一：在程式頁面載入地圖 qt5.6及之後取消了QWebkits,轉為使用QWebEngine. 在qt5.6的額ui設計師介面中，並不能直

JavaFX 圈選 仿百度地圖路線

import javafx.application.Application; import javafx.collections.ObservableList; import javafx.event.EventHandler; import javafx.geometry.Point

使用Python從百度地圖上批量下載興趣點（POI）

背景 編寫這個工具完全是因為資料採集專案需要，由於POI野外採集十分繁瑣，需要定位並錄入名稱、地址等資訊，為了減輕外業人員的負擔，我想到百度地圖上有相關的POI介面可以呼叫，如果能從百度地圖上下載到這

圖片拖動到百度地圖上

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport"

圖片拖動到百度地圖上2

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, u

百度地圖上大資料量點的顯示（基於…

     百度地圖API中在新增超過2000個點時，以傳統的AddOverlay（）的方式新增覆蓋物（標記）會出現顯示不全，地圖縮放或者拖動時非常卡頓，甚至瀏覽器頁面崩潰。      好在百度提供了百度lbs雲的資料圖層功能，可以將海量使用者資料的在地圖展示。使用者可以建立並上傳自己的資料麻點圖,製作

用JavaScript在百度地圖上畫扇形，任意角度的扇形，自定義覆蓋物

var map = new BMap.Map("allmap"); var pointCenter = new BMap.Point(120.1965, 30.22975); map.centerAndZoom(pointCenter, 19); map.enableScro

自定義百度地圖上顯示的覆蓋物

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <m

從後臺獲取位置資訊並定位在百度地圖上

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=

利用百度API將自定義的點標註在百度地圖上

有時候我們需要將自定義的點的資訊標註在地圖上，正好最近用到了這個功能，網上學習百度API後，也已經實現，現在在這做一個總結。 1.實現過程 要使用百度API，我們首先需要得到一個金鑰（ak），這個可以免費申請，具體申請流程在這就不贅述了。 現在詳細介紹下實

HTML5網頁定位，並將位置繪在百度地圖上

執行效果： 實現程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5定位</tit

百度地圖API一：百度地圖上迴圈顯示標註點。使用閉包迴圈載入點選事件

本文記錄：百度地圖上迴圈顯示標註點marker。使用立即執行函式和閉包迴圈載入點選事件顯示資訊視窗顯示該標註點的更多資訊。 最近一個專案也要用到地圖功能，公司內部的專案，就去研究了一下百度地圖的API。 感覺跟天地圖的API還是有很多的相似之處。 基本的使用方式 是差不太

Android 上拉滑動上滑拖出pop 類似百度地圖抽屜拖拽效果

這裡我們用到GitHub上個一個開源庫：https://github.com/yingLanNull/ScrollLayout先看效果圖大概就是這樣的一個效果，這個庫功能非常多，感謝前輩們的貢獻！--------------------------------------手動

上拉滑動上滑拖出 類似百度地圖首頁抽屜拖拽效果

ScrollLayout  地址：點選開啟連結 摘要 在ScrollView或者ListView裡面使用ViewPager.支援手勢上拉滑出,中途停頓,下滑退出頁面,類似百度地圖首頁效果 Gif動畫 類似使用    Demo 下載APK體驗 Usag