嘿，我有下面的代码，可以在谷歌地图上滑动一个 div 来显示位置信息。
然而，它似乎根本不想滑动。一旦它按下测试按钮点击滑动面板，它似乎就弹出到位而不是滑入/滑出。它似乎也搞乱了我对该 div 的滚动。我无法再使用 overflow-x 滚动条滚动浏览信息。
它应该从 Angular 落的右侧滑入，如图所示:
$(document).ready(function () {
load();
$('#click').click(function() {
$('.slider').toggle("slide", {
direction: "left",
distance: -180
}, 500);
});
});
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
以及它的 HTML:
<div>
<div align="center" id="zipBox">
Zip code: <input type="text" id="addressInput" size="10" style="border: solid 1px #000000; width: 40px;" maxlength="5" />
Radius: <select id="radiusSelect" style="border: solid 1px #000000;">
<option value="5" selected="selected">05 miles</option>
<option value="10">10 miles</option>
<option value="15">15 miles</option>
<option value="20">20 miles</option>
<option value="25">25 miles</option>
<option value="30">30 miles</option>
<option value="40">40 miles</option>
<option value="50">50 miles</option>
<option value="60">60 miles</option>
<option value="70">70 miles</option>
</select>
<input type="button" id="searchButton" value="Search" style="border: solid 1px #000000;" />
</div>
<div>
<select id="locationSelect" style="width:100%;visibility:hidden"></select>
<div align="right" class="slider">
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
</div>
</div>
<div id="mapAndInfo">
<div id="map" style="width: 800px; height: 600px"></div>
</div>
<div id="click" style="background: #000; color: #fff; width: 300px; height: 30px;">click to slide panel
</div>
</div>
现在是 CSS:
body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
#zipBox {
position: absolute;
margin-top: 598px;
width: 798px;
z-index: 10000;
border: 1px solid #CCC;
background: rgb(255,255,255);
background: transparent\9;
background: rgba(255,255,255,0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
}
.slider {
position: absolute;
z-index: 10002;
width: 170px;
height: 590px;
left: 320px;
border: solid 1px #CCC;
padding: 5px;
right: -280px;
overflow: scroll;
overflow-x: hidden;
background: rgb(255,255,255);
background: transparent\9;
background: rgba(255,255,255,0.8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff);
display: none;
}
查看 JSFiddle它的!
最佳答案
好吧，您的 fiddle 中没有加载 jquery-ui。您的代码工作正常，我将 .slider 上的 CSS 更改为
position: absolute;
...
right: 0;
并取出 left 属性。我不知道那是不是你想要的。但是HERE这是一个工作演示。干杯。
关于javascript - jquery 面板滑出和滑入 + 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26761588/