返回信息流代码地址 http://pastebin.com/jG3T1FyJ
html css 和js都放进去了,要载入地图,在安卓2.3自带的浏览器上会出现这个问题(在UC8.4上正常,但也跳,幅度没那么大而已,qq浏览器3.1,手机版firefox上都有这个问题):
点击搜索框进入输入模式,搜索框会自动向上跳出视口范围,并且每输入一次字都会向上移动一点,直到完全移出视口。
百度自家的地图http://map.baidu.com/mobile上面的搜索框则没有这个问题,请问怎么做到这个样子的?帮忙解决这个问题可报告八喜一只哈,先谢过
以防上面地址打不开,贴上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
@CHARSET "UTF-8";
/*
软件信息
版权信息
*/
* {
margin:0;
padding:0;
}
html{
width:100%;
height:100%;
background:#FFF;
}
body{
background:#FFF;
font-family:微软雅黑,‘Microsoft YaHei’,"宋体",Arial,Helvetica,sans-serif;
color:#000000;
height:100%;
}
#header{
width:100%;
position:absolute;
top:10px;
right:auto;
bottom:auto;
left:0px;
z-index:5;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-box-shadow:3px 3px 5px #E8E8E8;
-moz-box-shadow: 3px 5px #E8E8E8;
box-shadow: 3px 3px 5px #E8E8E8;
padding: 0.357em;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:.429em;
-moz-border-radius:.429em;
border-radius:.429em;
background-image: -webkit-gradient(linear, center top, center bottom, from(#fcfcfc), to(#bfbfbf), color-stop(3%, #f7f7f7), color-stop(12%, #f2f2f2), color-stop(90%, #d9d9d9));
background-image: -webkit-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: -moz-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: -o-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: -ms-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: linear-gradient(to bottom, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
/*
background-image: -webkit-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: -moz-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: -o-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: -ms-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: linear-gradient(to bottom, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);*/
}
#head table {
font-size:14px;
border-collapse:collapse;
table-
}
#head tbody {
display:table-row-group;
vertical-align:middle;
}
#head tbody td {
padding-left:0px;
padding-right:0px;
}
input.textbox {
width:100%;
height:100%;
border-left:#ccc 1px solid;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
border-right:#ccc 1px solid;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding-left:0.25em;
color:#ABAEB1;
box-sizing:border-box;
}
#header img {
display:inline-block;
height:2.071em;
line-height:2.071em;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#imgButton {
display:inline-block;
height: 2.071em;
line-height: 2.071em;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border-left:#ccc 1px solid;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
border-right:#ccc 1px solid;
margin-left: .214em;
color: #333;
background: #FFF;
width:34px;
}
a.button {
display:inline-block;
height: 2.071em;
line-height: 2.071em;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-left:#ccc 1px solid;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
border-right:#ccc 1px solid;
margin-left: .214em;
color: #333;
background: #FFF;
width:34px;
}
#page{
margin:0;
color:#FFF;
width:100%;
background:#000;
height:100%;
}
#container{
background:#00FF00;
border:0;
width:100%;
margin:0 auto;
height:100%;
}
#mapContent{
background:#060;
width:100%;
margin:auto;
height:100%;
}
</style>
<title>test</title>
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
window.addEventListener("load",function(){
setTimeout(function(){
window.scrollTo(0,0); },0);
});
window.addEventListener("orientationchange",function(){
window.scrollTo(0,0);
},false);
</script>
</head>
<body onUnload="javascript:logout()">
<div id="header">
<table style="width:100%; height: 2.071em;" border="0" cellpadding="0" cellspacing="0">
<tbody cellpadding="0" cellspacing="0">
<tr>
<td>
<input class="textbox" type="text" id="searchName" onKeyPress="if(event.keyCode==13){testSearch();}" />
</td>
<td style="width:34px">
<a id="imgButton" onClick="javascript:testSearch()"><img src="res/img/ic_menu_search30.png" /></a>
</td>
<td style="width:34px">
<a class="button" onClick="javascript:lastPage()"><</a>
</td>
<td style="width:34px">
<a class="button" onClick="javascript:nextPage()">></a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="page">
<!--百度地图容器-->
<div id="container">
<div id="mapContent"></div>
</div>
</div>
</body>
<!-----mainJS------->
<script type="text/javascript" >
initMap();
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图
function createMap() {
map = new BMap.Map("mapContent", {
enableHighResolution : true
});
window.map = map;
var point = new BMap.Point(116.395645, 39.929986);
map.centerAndZoom(point, 13);
map.addEventListener("click", function(){
if(mk)
mk.closeInfoWindow;
map.closeInfowindow;
});
}
function setMapEvent() {
map.enableScrollWheelZoom(); //启用鼠标滚轮放大缩小,默认禁用
map.enableDragging(); //启用地图拖拽,默认启用
map.enableDoubleClickZoom(); //启用双击放大,默认启用
}
</script>
这是一条镜像帖。来源:北邮人论坛 / www-technology / #16682同步于 2012/6/20
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖
移动web,固定在顶上的搜索框,点击进去就会往上跳
Rurouni
2012/6/20镜像同步0 回复
订阅后,新回复会通过你的通知中心匿名送达。
0 条回复
暂无回复 · 你可以订阅本帖等待新回复。