类似百度地图 关键字检索之后 能够左右滑动 的路线列表
最近做地图开发，界面效果模仿百度地图，自定义了一个自适应比较好的 左右滑动组件，滑动30%距离才会生效
直接上代码：
依赖 jquery.min.js bootstrap.min.css underscore-min.js
html +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">
<title>项目地图</title>
<link href="bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family:"微软雅黑";
font-size:12px;
overflow:hidden;
}
#header span[class="pull-right"] {
display:inline-block;
margin-top:-30px;
}
h2 {
text-align:center;
}
#toolsBar {
position:absolute;
z-index:15;
margin-top:20px;
}
#mapBox {
width:100%;
/* height:500px; */
position:relative;
}
#map {
height:100%;
position:absolute;
top:0;
left:1px;
right:1px;
bottom:0;
}
#mapList {
left :0;
width:100%;
height:114px;
position:absolute;
margin-left:1px;
margin-right:1px;
bottom:2px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="pageMiddle">
<div class="container" id="header">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2> 项目地图</h2>
<span class="pull-right"><a href="constructionlist.html">列表</a></span>
</div>
</div>
<div id="toolsBar" class="clearfix">
<div class="pull-left">
<input type="search" id="keyword" class="input-large search-query" placeholder="输入检索关键字">
<span class="btn btn-primary" id="searchBtn">搜索</span>
</div>
</div>
</div> <!-- /container -->
</div>
<div id="mapBox" >
<div id="map" class="pull-left"></div>
</div>
<div id="mapList">
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="underscore-min.js"></script>
<script id="data-list-template" type="text/template">
<%
var mapListWidth = $('#mapList').width();
$('#mapList').css({width: mapListWidth * constructionlstVO.length + 'px'});
_.each(constructionlstVO, function(item,index) {
marginLeft = ((50)/100*mapListWidth+'px');
width = (90)/100*mapListWidth+'px';
left = (-45+(index)*100)/100*mapListWidth+'px';
%>
<div class="panel panel-default"
style="position:absolute;margin-left:<%=marginLeft%>;width:<%=width%>;left:<%=left%>">
<div class="panel-heading">
<h3 class="panel-title">
<%=(index + 1) + "、" + item.constructionName%>
</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<label for="name">施工单位:</label>
<span class="field-value">
<%=item.departmentName%>
</span>
</div>
<div class="col-xs-12">
<label for="name">项目经理:</label>
<span class="field-value">
<%=item.projectManager%> <%=item.phoneNumber%>
</span>
</div>
</div>
</div>
<%});%>
</script>
<script type="text/javascript">
<!--
var constructionlstVO = [{
"constructionName" : "顺景变电站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "14524522547"
},{
"constructionName" : "景发变电站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "香丽变电站施工sdsdsd项目部",
"departmentName" : "广西大马工程sdsdfsdsdsdfsdsdsdfsdsdsdsds有限公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "南宁A区变电站施工项目部",
"departmentName" : "广西大马工程有限公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "南宁B区变电站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "南宁C区变电站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "南宁D区变电站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "景发A变电hsoensk站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "景发B变电站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
},{
"constructionName" : "景发C变电站施工项目部",
"departmentName" : "广西泗洪变电公司",
"projectManager" : "张大胆",
"phoneNumber" : "18645525203"
}];
/**
* 列表信息拖动事件
* @param {Object} event
*/
var panelDrag = {
elementId:-1,
iCount:0,
objDiv : null,
currentX : -1,
startX : -1,
touchSatrtFunc : function(event){
var touch = event.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
panelDrag.startX = x;
panelDrag.currentX = x;
},
touchMoveFunc : function(event){
var touch = event.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var size = $("#"+panelDrag.elementId+">div").length;
var width = $("#"+panelDrag.elementId).width();
$("#"+panelDrag.elementId+">div").each(function(index,item){
if (panelDrag.startX == panelDrag.currentX){
this.style.left = (Number(this.style.left.replace('px','')) + (x -panelDrag.startX)) +"px";
} else {
this.style.left = (Number(this.style.left.replace('px','')) + (x -panelDrag.currentX)) +"px";
}
});
panelDrag.currentX = x;
},
touchEndFunc : function(event){
var size = $("#"+panelDrag.elementId+">div").length;
var width = $("#"+panelDrag.elementId).width();
var dstance = (panelDrag.currentX -panelDrag.startX) > 0 ? width/size :-1* width/size;
//活动比例超过30%，即成功
if (Math.abs(panelDrag.currentX -panelDrag.startX)*size/width > 0.3){
$("#"+panelDrag.elementId+">div").each(function(index,item){
this.style.left = (Number(this.style.left.replace('px','')) - (panelDrag.currentX -panelDrag.startX) + dstance) +"px";
});
} else {
$("#"+panelDrag.elementId+">div").each(function(index,item){
this.style.left = (Number(this.style.left.replace('px','')) - (panelDrag.currentX -panelDrag.startX)) +"px";
});
}
/**
* 防止出界
*/
var firstX = Number($("#"+panelDrag.elementId+">div")[0].style.left.replace('px',''));
if(firstX < (width*(-1-0.45/size)) || firstX > (width*-0.45/size)){
$("#"+panelDrag.elementId+">div").each(function(index,item){
this.style.left = (Number(this.style.left.replace('px','')) - dstance) +"px";
});
}
},
eventBind : function(elementId){
if (document.getElementById(elementId)){
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
panelDrag.elementId = elementId;
panelDrag.objDiv = document.getElementById(elementId);
panelDrag.objDiv.addEventListener('touchstart', panelDrag.touchSatrtFunc, false);
panelDrag.objDiv.addEventListener('touchmove', panelDrag.touchMoveFunc, false);
panelDrag.objDiv.addEventListener('touchend', panelDrag.touchEndFunc, false);
} else {
console.log("元素不存在 id--" + elementId);
}
}
};
$("#mapList").append(_.template($('#data-list-template').html()));
panelDrag.eventBind("mapList");
//-->
</script>
</html>