請問出了什么問題？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bing search</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
body{background-color:#333;}
.bg-div{position:relative; background-image:url(river.jpg);width:1665px; height:900px; margin:0 auto;}
.logo{margin:-6px 18px 0 0; background-image:url(logo.png);width:107px; height:53px; float:left;}
form{float:left; background-color:#fff; padding:1px; height:30px;}
.search-input-text{border:0; float:left; width:330px; height:29px; line-height:29px; outline:none;}
.search-input-button{border:0;width:29px; height:29px; background-image:url(search-button.png); float:left;}
.search-box{
position: absolute;
top: 401px;
left: 604px;
}
.suggest{width:330px; background-color:#fff; border:1px solid #999;}
.suggest ul{list-style:none; margin:0; padding:0;}
.suggest ul li{padding:3px; font-size:14px; line-height:25px; cursor:pointer;}
.suggest ul li:hover{text-decoration:underline; background-color:#e5e5e5;}
</style>
</head>
<body>
<div class="bg-div">
? ? <div class="search-box">
? ? <div class="logo"></div>
? ? ? ? <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
? ? ? ? <input type="text" class="search-input-text" ?name="q" id="search_input" autocomplete="off"/>
? ? ? ? ? ? <input type="submit" class="search-input-button" value=""/>
? ? ? ? </form>
? ? ? ? ? </div>
? ? </div>
? ?<div class="suggest" id="search-suggest" style="display:none">
? ? <ul id="search-result">
? ? ? ? <li>搜索結果1</li>
? ? ? ? ? ? <li>搜索結果2</li>
? ? ? ? ? ? <li>搜索結果3</li>
? ? ? ? </ul>
? ?
? ?</div>
? ?
<script>
var getDOM=function(id){
return document.getElementById(id);
}
var addEvent=function(id,event,fn){
var el=getDOM(id)||document;
if(el.addEventListener){
el.addEventListener(event,fn,false);
}
else if(el.attachEvent){
el.attachEvent('on'+event,fn);
}
}
var getElementLeft=function(element){
var actualLeft=element.offsetLeft;//offsetLeft是獲得距離父元素左邊的距離
var current=element.offsetParent;
while(current!=null){
actualLeft+=current.offsetLeft;
current=current.offsetParent;
}
return actualLeft;
}
var getElementTop=function(element){
var actualTop=element.offsetTop;
var current=element.offsetParent;
while(current!==null){
actualTop+=current.offsetTop;
current=current.offsetParent;
}
return actualTop;
}
addEvent('search_input','keyup',function(){
getDOM('search-suggest').style.top=getElementTop(getDOM('search-form'))+29+'px';
getDOM('search-suggest').style.left=getElementTop(getDOM('search-form'))+'px';
getDOM('search-suggest').style.position='absolute';
getDOM('search-suggest').style.display='block';
})
</script>
</body>
</html>
情況如圖：
提示框怎么變化到那里去了？
2016-12-04
樓主馬虎了
getDOM('search-suggest').style.left=getElementTop(getDOM('search-form'))+'px';里應該是Left,不是Top