<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>bing search</title> <style type="text/css"> *{margin: 0;padding: 0} body{background-color: #333;} .bg-div{position:relative;background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;} .logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;} .search-form{float: left; background-color: #fff;padding:5px;} .search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;} .search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0;} .search-box{position:absolute;top:150px;left: 200px; } .suggest{width: 388px;border: 1px solid #999;background-color: #fff;position: absolute;} .suggest ul{list-style: none;} .suggest ul li{line-height: 25px;padding: 3px;font-size: 14px;cursor: pointer;} .suggest ul li:hover{background-color: #e5e5e5;text-decoration: underline;} </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </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-text" name="q" id="search-input" /> <input type="submit" class="search-button" value="" id="search-button" /> </form> </div> </div> <div class="suggest" id="search-suggest" style="display: none;"> <ul id="search-result"> <li>hah</li> <li>hah</li> <li>hah</li> <li>hah</li> <li>hah</li> <li>hah</li> </ul> </div> <script type="text/javascript"> // $("#search-input").on("keyup",function(){ // var searchText = $("#search-input").val(); // $.get('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){ // var d=d.AS.Results[0].suggests; // var html=''; // d.each(function(index,result){ // html+='<li>'+result.Txt+'</li>'; // $("#search-result").html(html); // $("#search-suggest").show().css({ // top:$("#search-form").offset().top+$("#search-form").outerHeight(), // left:$("#search-form").offset().left // }) // }) // },"json"); // }) // $(document).on("click",function(){ // $("#search-suggest").hide() // }) // $(document).on("click","li",function(){ // var keyword=$(this).text(); // location.href='http://api.bing.com/search?q='+keyword; // }) //获得id元素 var getDom=function(id){ return document.getElementById(id); } //给id元素绑定事件 var addEvent=function(id,event,fn){ var elem=getDom(id)||document; if(elem.addEventListener){ elem.addEventListener(event,fn,false); }else if(elem.attachEvent){ elem.attachEvent("on"+event,fn); }else{ elem["on"+event,fn]; } } var getElementLeft=function(elem){ var actuallf=elem.offsetLeft; var parentelem=elem.offsetParent; while(parentelem!=null){ actuallf+=parentelem.offsetLeft; parentelem=parentelem.offsetParent; } return actuallf; } var getElementTop=function(elem){ var actualtp=elem.offsetTop; var parentelem=elem.offsetParent; while(parentelem!=null){ actualtp+=parentelem.offsetTop; parentelem=parentelem.offsetParent; } return actualtp; } // window.onload=function(){ // } window.onload=function(){ addEvent("search-input","keyup",function(){ getDom("search-suggest").style.top=getElementTop(getDom("search-form"))+38+"px"; getDom("search-suggest").style.left=getElementLeft(getDom("search-form"))+"px"; getDom('search-suggest').style.display = 'block'; }) } </script> </body> </html>
while(parentelem!=null){ actuallf+=parentelem.offsetLeft; parentelem=parentelem.offsetParent; } return actuallf; }
上面4行什么意思咯
actuallf+
这是什么意思咯
weibo_哆啦A梦有大口袋_0
叶0528
相关分类