跪求这样的效果如何实现

一个div里面显示出来时 A B C ....Z 26个字母，然后我想当鼠标移动到A字母上时，弹出一个页面，里面都是以A开头的一些东西。当移开A字母时，关闭刚弹出的。现在困惑的主要是：
如何当移动到A时，能够从js中取到，或者如何知道。
如何做这个弹出页面。如果有源码共享一下就更好了。不胜感激。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

最基本的JS操作DOM和AJAX，看样子你是没什么基础，所以去学学基础的再做。
楼上能不能给个简单的例子。js操作dom、Ajax的基础还是有点。但都没系统的学过。
js+ajax,js么，字母上，onMouseover="弹出窗口" onMouseOut="关闭窗口"
弹出窗口，窗口中onload调ajax从后台获取数据。个人觉得用div可能好点
http://blog.csdn.net/lzqlrr/archive/2008/07/29/2728531.aspx
attachEvent事件
楼主，这玩意很多现成的，jquery有很多插件，同时提供对ajax的支持。jquery ui里面就有弹出DIV。然后使用它的ajax和事件监听处理下就OK。
不知道你是做产品还是做毕业设计。如果是毕业设计太可不必搞得主复杂, 产品就没办法了_这种效果用 Jquery 显然是最好的办法 ,事实上多数案例都是这么做的.如果你没什么基础[我是指ajax之类的] 那么对你来说这个的确有点麻烦之前有人在这个版块发了个 js 弹出层这样应用的js 包。你可以去找找。
可以试试用YUI啊，他里面封装了很多JS的特效，很好用的，jquery可以实现的功能，好像YUI都可以实现，我之前就用过他的YUI Autocomplete。建议楼主去看看。http://developer.yahoo.com/yui/2/
现在用的比较多的还是jquery 你还是改下思路吧别弄弹出页面了  直接弹出个窗体比如说DIV 然后控制他这样关闭的时候也可以调用jquery。
你可以使用dwr+js来完成，dwr可以完成于后天的交换，而js就可以控制前台，这样是可以完成你需要的这种效果！！
无语了,这么多东东,不知楼主会怎么去做
<div>
<span onMouseover=show(this) onMouseout=hidden()>A</span>
<span onMouseover=show(this) onMouseout=hidden()>B</span>
<span onMouseover=show(this) onMouseout=hidden()>C</span>
<span onMouseover=show(this) onMouseout=hidden()>D</span>
<span onMouseover=show(this) onMouseout=hidden()>E</span>
<span onMouseover=show(this) onMouseout=hidden()>F</span>
<span onMouseover=show(this) onMouseout=hidden()>G</span>
<span onMouseover=show(this) onMouseout=hidden()>H</span>
                                                 .
                                                 .
                                                 .
                                                 .
                                                 .
</div>
<div id="showDiv"></div>
<script src="/jQuery/jquery-1.2.6.pack.js"></script>//用了jQuery,这里是你的jQuery的存放位置
<script>
  function show(obj){
    var value=obj.innerHTML;
    jQuery("#showDiv").html("");//先清空里的内容
    jQuery.post("这是你访问后台的路径打个比方:/system.do?method=selectValue",{"v":value},function(data){
    jQuery("#showDiv").show().html(date);//再将后台返回的数据放到这个层里去
});
  }  functon hidden(obj){
     jQuery("#showDiv).hidden();//关闭这个层
}
</script>这就是所谓的动态显示不同的内容,不知道这个后台的处理楼主能不能搞定
楼上的。咱们是程序员。不用写26个span。里面再对应写那个什么东西。可以直接使用onload的时候添加onmouse之类的事件
简单写了个
前台页面 t1.html:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
#myDiv span {
cursor: pointer;
}
#tooltip {
position: absolute;
display: none;
border: 1px solid #aaa;
padding: 3px;
}
</style>
</head>
<body><div id="myDiv"></div><div id="tooltip"></div>
<script>
$(document).ready(function() {
// 填充字母到div中
for(i = "a".charCodeAt(0); i <= "z".charCodeAt(0); i ++) {
var val = String.fromCharCode(i);
var str = "<span class='textSpan' id='sp" + i + "' alt='" + val + "'>" + val + "</span> ";
$("#myDiv").append(str);
} // 邦定鼠标移入事件
$(".textSpan").bind("mouseover",function() {
// 获取span的值
var str = $(this).text(); // 自身位置
var top = $(this).attr("offsetTop");
var left = $(this).attr("offsetLeft");
var span = $(this);
// ajax请求
jQuery.get("t2.php",{'requestValue':str},function(data) {
// 显示隐藏的提示框
$("#tooltip").html("");
$("#tooltip").append(data);
$("#tooltip").css("top",top + 25);
$("#tooltip").css("left",left + 10);
$("#tooltip").show();
})
}); // 邦定鼠标移出事件,隐藏提示框
$(".textSpan").bind("mouseout",function() {
$("#tooltip").hide();
});
});</script>
</body>
</html>
后台处理 t2.php:<?php
// 假定结果数组
$ary =
Array(
'a' => Array('aa','aasdf','asdf'),
'b' => Array('bb','bbba','babba')
);// 请求的键名
$value = $_REQUEST['requestValue'];// 返回结果
if(array_key_exists($value,$ary)) {
$returnArray = $ary[$value];
foreach ($returnArray as $v)
echo "$v<br/>";
} else {
echo "no value in array";
}
?>

跪求 这样的效果如何实现

解决方案 »

跪求这样的效果如何实现