BBYR Achieve
返回信息流
这是一条镜像帖。来源:北邮人论坛 / www-technology / #16682同步于 2012/6/20
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖

移动web,固定在顶上的搜索框,点击进去就会往上跳

Rurouni
2012/6/20镜像同步0 回复
代码地址 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()">&lt;</a> </td> <td style="width:34px"> <a class="button" onClick="javascript:nextPage()">&gt;</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>
订阅后,新回复会通过你的通知中心匿名送达。
0 条回复
暂无回复 · 你可以订阅本帖等待新回复。