求类似百度窗口的java script代码
类似百度窗口的，能实现简单页面跳转的，比如点“MP3”就可以进入另一个页面，不需要联网，就一些小功能也可以加上，老师作业，最好人性化，个性化一点没分了，都给了...
类似百度窗口的，能实现简单页面跳转的，比如点“MP3”就可以进入另一个页面，不需要联网，就一些小功能也可以加上，老师作业，最好人性化，个性化一点
没分了，都给了 展开
没分了，都给了 展开
展开全部
这个分确实有点少了。
这个肯定可以
把下列代码复制然后 保存为 xx.html
直接双击运行就行了
<!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>搜索</title>
<style type="text/css">
<!--
* {margin: 0px;padding: 0px;}
body {
text-align: center;
padding-top: 100px;
font-size: 12px;
}
table {margin: auto;}
#wd {width: 350px;}
div#s {position: relative;}
div#ss {position: absolute;width: 352px;visibility: hidden;left: 0px;top: 20px;}
div#ss ul {border: 1px solid #000000;text-align: left;}
div#ss li {
position: relative;
width: 100%;
background-color: #FFFFFF;
cursor: default;
line-height: 18px;
text-indent: 2px;
}
div#ss li.hov {background-color: #6666FF;color: #FFFFFF;}
div#ss li.hov span {color: #99FFFF;}
div#ss li span {color: #009900;position: absolute;top: 0px;right: 2px;}
UL {list-style-type: none;}
-->
</style>
</head>
<script language="javascript">
var IE=new Function('','if(navigator.appName.indexOf("Explorer")>=0)return true;if(navigator.appName.indexOf("Netscape")>=0)return false');
var sou = function ()
{
var shuru = document.getElementById('wd');
var shuchu = document.getElementById('ss');
var sxPress = false ;
var oldValue;
shuchu.onmouseover = function (e)
{
e||(e=window.event);
var eveSrc = (typeof e.target != "undefined")?e.target:e.srcElement;
eveSrc = eveSrc.tagName=="SPAN"?eveSrc.parentNode:eveSrc;
if(eveSrc.tagName=="LI")
{
var eveParent = eveSrc.parentNode;
for(i=0;i<eveParent.childNodes.length;i++)
eveParent.childNodes[i].className = "";
eveSrc.className="hov";
}
}//end onmouseover
function down(e)
{
e||(e=window.event);
var eveSrc = (typeof e.target != "undefined")?e.target:e.srcElement;
if(eveSrc.tagName=="LI"){
if(eveSrc.parentNode.parentNode.id=="ss")
{
//shuru.value = eveSrc.firstChild.data;
document.forms["form1"].submit();
return;
}
}
if(eveSrc==shuru)return;
shuchu.style.visibility="hidden";
}//end down
document.onmousedown = down;
shuru.onkeydown = function (e)
{
e||(e=window.event);
switch(e.keyCode){
case 40:
if(shuchu.style.visibility=="hidden")return;
sxPress = true;
var ele = shuchu.firstChild.childNodes;
var thisEle = new Object();
for(i=0;i<ele.length;i++)
if(ele[i].className=="hov")
{thisEle = ele[i];break;}
if(typeof thisEle.className=="undefined")
{
thisEle = ele[0];
thisEle.className = "hov";
shuru.value=thisEle.firstChild.data;
return;
}
thisEle.className = "";
if(thisEle==ele[ele.length-1]){shuru.value = oldValue; return;}
shuru.value = thisEle.nextSibling.firstChild.data;
thisEle.nextSibling.className = "hov";
break;
case 38:
if(shuchu.style.visibility=="hidden")return;
sxPress = true;
var ele = shuchu.firstChild.childNodes;
var thisEle = new Object();
for(i=0;i<ele.length;i++)
if(ele[i].className=="hov")
{thisEle = ele[i];break;}
if(typeof thisEle.className=="undefined")
{
thisEle = ele[ele.length-1];
thisEle.className = "hov";
shuru.value=thisEle.firstChild.data;
return;
}
thisEle.className = "";
if(thisEle==ele[0]){shuru.value = oldValue; return;}
shuru.value = thisEle.previousSibling.firstChild.data;
thisEle.previousSibling.className = "hov";
break;
default:
if(!IE())
change();
sxPress = false;
break;
}
}//end onkeyup
if(IE())shuru.onpropertychange = change;
function change ()//生成相关搜索
{
if(!sxPress)oldValue = shuru.value;
else return;
if(shuru.value!=""){//这里胡乱生成的相关搜索；
var str = "";
for(i=0;i<10;i++)
{
str +="<li>" +shuru.value+i+"<span>"+Math.floor(Math.random()*1000)+"个搜索结果</span></li>";
}
shuchu.style.visibility = "visible";
shuchu.innerHTML = "<ul>"+str+"</ul>";
}else{
shuchu.style.visibility = "hidden";
}
}//end change
}
window.onload = function ()
{sou();}
</script>
<body>
<p><img src="http://www.baidu.com/img/logo.gif" /></p>
<p> </p>
<form id="form1" name="form1" method="get" action="http://www.baidu.com/s">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="330">
<p id="nv"><a href="http://news.baidu.com">新 闻</a> <b>网 页</b> <a href="http://tieba.baidu.com">贴 吧</a> <a href="http://zhidao.baidu.com">知 道</a> <a href="http://mp3.baidu.com">MP3</a> <a href="http://image.baidu.com">图 片</a> <a href="http://video.baidu.com">视 频</a> <a href="http://map.baidu.com">地 图</a></p>
<div id="s">
<input name="wd" type="text" id="wd" size="50" maxlength="30" autocomplete="off" />
<div id="ss"></div>
</div>
</td>
<td width="170"> <input type="submit" name="Submit" value="百度一下" /></td>
</tr>
</table>
</form>
</body>
</html>
这个肯定可以
把下列代码复制然后 保存为 xx.html
直接双击运行就行了
<!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>搜索</title>
<style type="text/css">
<!--
* {margin: 0px;padding: 0px;}
body {
text-align: center;
padding-top: 100px;
font-size: 12px;
}
table {margin: auto;}
#wd {width: 350px;}
div#s {position: relative;}
div#ss {position: absolute;width: 352px;visibility: hidden;left: 0px;top: 20px;}
div#ss ul {border: 1px solid #000000;text-align: left;}
div#ss li {
position: relative;
width: 100%;
background-color: #FFFFFF;
cursor: default;
line-height: 18px;
text-indent: 2px;
}
div#ss li.hov {background-color: #6666FF;color: #FFFFFF;}
div#ss li.hov span {color: #99FFFF;}
div#ss li span {color: #009900;position: absolute;top: 0px;right: 2px;}
UL {list-style-type: none;}
-->
</style>
</head>
<script language="javascript">
var IE=new Function('','if(navigator.appName.indexOf("Explorer")>=0)return true;if(navigator.appName.indexOf("Netscape")>=0)return false');
var sou = function ()
{
var shuru = document.getElementById('wd');
var shuchu = document.getElementById('ss');
var sxPress = false ;
var oldValue;
shuchu.onmouseover = function (e)
{
e||(e=window.event);
var eveSrc = (typeof e.target != "undefined")?e.target:e.srcElement;
eveSrc = eveSrc.tagName=="SPAN"?eveSrc.parentNode:eveSrc;
if(eveSrc.tagName=="LI")
{
var eveParent = eveSrc.parentNode;
for(i=0;i<eveParent.childNodes.length;i++)
eveParent.childNodes[i].className = "";
eveSrc.className="hov";
}
}//end onmouseover
function down(e)
{
e||(e=window.event);
var eveSrc = (typeof e.target != "undefined")?e.target:e.srcElement;
if(eveSrc.tagName=="LI"){
if(eveSrc.parentNode.parentNode.id=="ss")
{
//shuru.value = eveSrc.firstChild.data;
document.forms["form1"].submit();
return;
}
}
if(eveSrc==shuru)return;
shuchu.style.visibility="hidden";
}//end down
document.onmousedown = down;
shuru.onkeydown = function (e)
{
e||(e=window.event);
switch(e.keyCode){
case 40:
if(shuchu.style.visibility=="hidden")return;
sxPress = true;
var ele = shuchu.firstChild.childNodes;
var thisEle = new Object();
for(i=0;i<ele.length;i++)
if(ele[i].className=="hov")
{thisEle = ele[i];break;}
if(typeof thisEle.className=="undefined")
{
thisEle = ele[0];
thisEle.className = "hov";
shuru.value=thisEle.firstChild.data;
return;
}
thisEle.className = "";
if(thisEle==ele[ele.length-1]){shuru.value = oldValue; return;}
shuru.value = thisEle.nextSibling.firstChild.data;
thisEle.nextSibling.className = "hov";
break;
case 38:
if(shuchu.style.visibility=="hidden")return;
sxPress = true;
var ele = shuchu.firstChild.childNodes;
var thisEle = new Object();
for(i=0;i<ele.length;i++)
if(ele[i].className=="hov")
{thisEle = ele[i];break;}
if(typeof thisEle.className=="undefined")
{
thisEle = ele[ele.length-1];
thisEle.className = "hov";
shuru.value=thisEle.firstChild.data;
return;
}
thisEle.className = "";
if(thisEle==ele[0]){shuru.value = oldValue; return;}
shuru.value = thisEle.previousSibling.firstChild.data;
thisEle.previousSibling.className = "hov";
break;
default:
if(!IE())
change();
sxPress = false;
break;
}
}//end onkeyup
if(IE())shuru.onpropertychange = change;
function change ()//生成相关搜索
{
if(!sxPress)oldValue = shuru.value;
else return;
if(shuru.value!=""){//这里胡乱生成的相关搜索；
var str = "";
for(i=0;i<10;i++)
{
str +="<li>" +shuru.value+i+"<span>"+Math.floor(Math.random()*1000)+"个搜索结果</span></li>";
}
shuchu.style.visibility = "visible";
shuchu.innerHTML = "<ul>"+str+"</ul>";
}else{
shuchu.style.visibility = "hidden";
}
}//end change
}
window.onload = function ()
{sou();}
</script>
<body>
<p><img src="http://www.baidu.com/img/logo.gif" /></p>
<p> </p>
<form id="form1" name="form1" method="get" action="http://www.baidu.com/s">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="330">
<p id="nv"><a href="http://news.baidu.com">新 闻</a> <b>网 页</b> <a href="http://tieba.baidu.com">贴 吧</a> <a href="http://zhidao.baidu.com">知 道</a> <a href="http://mp3.baidu.com">MP3</a> <a href="http://image.baidu.com">图 片</a> <a href="http://video.baidu.com">视 频</a> <a href="http://map.baidu.com">地 图</a></p>
<div id="s">
<input name="wd" type="text" id="wd" size="50" maxlength="30" autocomplete="off" />
<div id="ss"></div>
</div>
</td>
<td width="170"> <input type="submit" name="Submit" value="百度一下" /></td>
</tr>
</table>
</form>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
