您的位置：首页 > 其它

百度一下

2015-08-12 22:54 253 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>

<head>

<title>so.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
//光标定位
$("#keywords").focus();
$("#keywords").keyup(function(){

if($(this).val()){
$(".message_li").show()
}else{
$(".message_li").hide();
}
$(".message_li>li").mouseover(function(){
//向当前元素添加class
$(this).addClass("soclass");
})

$(".message_li>li").mouseout(function(){
//向当前元素删除样式
$(this).removeClass("soclass");

})

})

$("#keywords").blur(function(){
//input 框失去焦点隐藏
$(".message_li").hide();
})

//监听键盘...
$(window).keydown(function(event){
//键盘上面每个按钮对应的它都是一个数字,上下键对应的数字是多少..
switch(event.keyCode) {
case 38:{
//向上的键我们应该干的事情

break;
}
case 40:{
//向下的键应该做的事情..

if($(".soclass").length ==0 ){
$(".message_li>li:first").addClass("soclass");
$("#keywords").val($(".message_li>li:first").text());
}else{
if($(".soclass").next().length==0){
$(".message_li>li:last").removeClass("soclass");
$(".message_li>li:first").addClass("soclass");
$("#keywords").val($(".message_li>li:first").text());

}else{
$(".soclass").removeClass("soclass").next().addClass("soclass");
$("#keywords").val($(".soclass").text());
}

}
break;
}
}
});


})

</script>

</head>

<style type="text/css">

.soclass{

background:red;

}

#keywords{

width:500px;
font-size:28px;

}
#searchbutton{
font-size:26px;
}
.message_li{
width:502px;
border:1px solid #999999;
margin-left:-140px;
margin-top:-2px;
display:none;
}
.message_li li{
list-style:none;
padding:5px;
}

</style>

<body>

<div class="meassage_area" align="center">
<input type="text" id="keywords">
<input type="button" value="百度一下" id="searchbutton">
<div class="message_li" align="left">
<li>中国好声音</li>
<li>中国好男人</li>
<li>中国好嫂子</li>
<li>中国好媳妇</li>
<li>中国丈母娘</li>
<li>中国老太太</li>
<li>中国好老师</li>
<li>中国加多宝</li>
<li>中国凉茶</li>
</div>
</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航