如何实现下面的功能
如下所示:
首页 图书查询 推荐图书 热点图书 查看购物车 读者反馈 会员登录
字段查询| 分类查询| 索引查询
其中:字段查询| 分类查询| 索引查询是 "图书查询 "的子菜单,现在要实现当鼠标在 "图书查询 "处时出现这三个子菜单,当鼠标移走时隐藏这三个子菜单,请各位帮帮忙
因为涉及到JAVASCRIPT,二这方面的我没学过,所以请您在帮我解决问题的时候能不能尽量讲的详细些,万分的感谢
希望尽快得到答复,因为已经困扰我很久了
[解决办法]
你去网上搜一下“网页特效精灵”上面有类似的，你可以参考以下
[解决办法]
DIV+CSS能实现这种效果的，
blog上放的有几个例子，你看下。
http://www.hmilyld.cn/read.php?372
[解决办法]
: <!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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
<!--
.STYLE3 {font-size: 13px}
body {
background-image: url(e273f9f2daaf568e7942d546987091c4.jpg);
}
-->
</style>
<script language= "javascript ">
function show(){
div.style.display= "block ";
}
function hide(){
div.style.display= "none ";
}
</script>
</head>
<body>
<span class= "STYLE7 ">
<span class= "STYLE8 STYLE3 "> 首页
<a href= "# " onmouseover= "show() " onmouseout= "hide() "> 图书查询 </a>
推荐图书 热点图书 查看购物车 读者反馈 会员登录 </span>
</span>
<div id= "div " class= "hidd " style= "display:none; ">
<a href= "books_select.jsp " target= "mainFrame " style= "font: '华文隶书 ' "> <font size= "2 "> 字段查询 </font> </a>
<a href= "disselect.jsp " target= "mainFrame " style= "font: '华文隶书 ' "> <font size= "2 "> 分类查询 </font> </a>
<a href= "indselect.jsp " target= "mainFrame " style= "font: '华文隶书 ' "> <font size= "2 "> 索引查询 </font> </a>
</div>
</body>
</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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
<!--
.STYLE3 {font-size: 13px}
body {
}
-->
</style>
<script language= "javascript ">
var p,book,d;
function getoffset(e)
{
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
var rec = new Array(1);
rec[0] = t;
rec[1] = l;
return rec
}
function init()
{
book=document.getElementById( "tushu ");
d=document.getElementById( "div1 ");
d.style.display= "none ";
p=getoffset(book);
d.style.left=p[1]-(180-book.offsetWidth)/2; //(d.offsetWidth-book.offsetWidth)/2; d.offsetWidth 不知为什么获取不到值
d.style.top=p[0]+book.offsetHeight;
}
function show()
{
document.getElementById( "div1 ").style.display= "block ";
}
function hidd()
{
document.getElementById( "div1 ").style.display= "none ";
}
</script>
</head>
<body onload= "init() ">
<span class= "STYLE7 "> <span class= "STYLE8 STYLE3 "> 首页
<a id= "tushu " href= "# " onmouseover= "show() "> 图书查询 </a>
推荐图书 热点图书 查看购物车 读者反馈 会员登录 </span> </span>
<div id= "div1 " class= "hidd " onmouseover= "show() " onmouseout= "hidd() " style= "left:auto; top:auto; position:absolute; display:block; background-color:yellow; ">
<a href= "books_select.jsp " target= "mainFrame " style= "font: '华文隶书 ' "> <font size= "2 "> 字段查询 </font> </a> |
<a href= "disselect.jsp " target= "mainFrame " style= "font: '华文隶书 ' "> <font size= "2 "> 分类查询 </font> </a> |
<a href= "indselect.jsp " target= "mainFrame " style= "font: '华文隶书 ' "> <font size= "2 "> 索引查询 </font> </a>
</div>
</body>
</html>
[解决办法]
把楼上的稍微修改一下,把事件增加到 <div> 里面
<div id= "div " class= "hidd " style= "display:none; "onmouseover= "show() " onmouseout= "hide() ">
<a href= "# " onmouseover= "show() " onmouseout= "hide() "> 图书查询 </a> 这个修改为
<a href= "# " onmouseover= "show() "> 图书查询 </a>
这样鼠标移上去的话就可以停留了，要不然鼠标一动就没有了
