                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /搜索框制作

模仿百度搜索框

<html>
    <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="description" content="小清新 文艺青年的聚集地">
<meta name="keywords" content="淘宝导航 点击切换颜色">
<title>百度搜索框</title>

<link rel="stylesheet" href="baidu.css">
</head>
<body>
<div>
<div>
<img src="bd_logo1.png" width="270px" height="129px" />
</div>
<div>
<form id="searchForm">
<div id="searchTxt">
                        <input type="text" id="searchInput">
   </div>
                    <div>
                     <input type="submit" value="百度一下">
                    </div>
</form>

</div>
            <p><a>糯米517吃货节，地道美食5.17元起</a></p>
            <div id="search-suggest" style="display: none">
             <ul>
             <li>搜索结果1</li>
             <li>搜索结果1</li>
             <li>搜索结果1</li>
             </ul>
            </div>
</div>
<script type="text/javascript">
            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;
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('searchInput','keyup',function(){
getDOM('search-suggest').style.top = getElementTop(getDOM('searchTxt'))+38+'px';
getDOM('search-suggest').style.left = getElementLeft(getDOM('serachTxt'))+'px';
getDOM('search-suggest').style.position = 'absolute';
getDOM('search-suggest').style.display = 'block';
});

</script>

</body>
</html>