JAVASCRIPT+CSS的实现效果,求高手指点

这个不难，显示的那一块其实是一个层在进度条里写事件
onmouseover='显示层'
onmouseout='隐藏层'数据你可以通过ajax读到
那个层的z-index 设置高点
层的位置就是鼠标当前的坐标就可以了。

原理我都是知道的,关键是我想实现那样的CSS,谁有完整的示例吗?

<p style="height:200px;background:yellow;"></p>
<div onmouseover="javascript:document.getElementById('info').style.display='block';" onmouseout="javascript:document.getElementById('info').style.display='none';" style="width:300px;background:red;border:solid 1px #cccccc;height:5px;position:relative;">
<div id='info' style="display:none;left:50%;top:-100px;position:absolute;width:100px;height:100px;background:green;color:#ffffff;">information</div>
</div>

LZ说那个css效果，实现起来不难，下载那个网址的带尖括号的那张图片，还需设置层的边框属性border: 1px solid gray，背景色background-color至于鼠标移上去层显示则需要在进度条那里调用onmousemove/onmouseover事件
鼠标移开层消失在进度条那里执行onmouseout事件
<html>
<head>
<title>test</title>
<style>
body {margin: 0; font-size: 12px;}
.title {
width: 100px; height: auto; border: 1px solid gray; border-bottom: 0px;
background-color: #eeeeff; display: none; position:relative;
}
</style>
<script language="javascript">
//通过id查找对象
function $(id) {
  return document.getElementById(id);
}
//显示/隐藏层
function show(id) {
  var thisDiv = $(id);
  var stateDiv = thisDiv.style.display;  if(stateDiv=='block') {
    thisDiv.style.display = 'none';
  }else {
    thisDiv.style.display = 'block';
    thisDiv.zIndex = '99';    //查找进度条位置
    var bar = $('bar');
    //获取进度条左边距
    var barLeft = getLeft(bar);
    //获取进度条顶边距
    var barTop = getTop(bar);
   //层的定位自己调整
    thisDiv.style.left = barLeft + 60; //层的左边距
     thisDiv.style.top = barTop - 100; //层的顶边距
   //设置层中的内容
    thisDiv.innerHTML = ''; //内容根据ajax提取的内容填写
  }
}
//获得绝对顶边距
function getTop(e){
var ost = e.offsetTop;
while(e=e.offsetParent){
ost += e.offsetTop;
}
return ost;
}
//获得绝对左边距
function getLeft(e){
var osl = e.offsetLeft;
while(e=e.offsetParent){
osl += e.offsetLeft;
}
return osl;
}
</script></head><body><span id="bar" onmousemove="show('titlediv');" onmouseout="show('titlediv');">进度条图片</span>
<div id="titlediv" class="title"></div></body>
</html>

http://download.csdn.net/source/376241DIV加GIF模拟

http://www.baojia365.com/ 中间的地图有类似的效果

下面的代码测试过，可以用，仅作为参考
<html>
<head>
<title>test</title>
<style>
body {margin: 0; font-size: 12px; border: 1px solid gray; text-align: center;}
.title {
width: 100px; height: auto; border: 1px solid gray; border-bottom: 0px;
background-color: #eeeeff; display: none; position:absolute;
}
.title {
PADDING-LEFT: 13px; display: block; border: 0px solid gray;
BACKGROUND: url(http://album.hi.csdn.net/app_uploads/uFeng/20090111/110410562.p.gif?d=20090111110427937) -307px 0px; WIDTH: 300px;}
.title P {
BORDER-RIGHT: #c3daf9 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #c3daf9 1px solid;
PADDING-LEFT: 34px; BACKGROUND: url(http://album.hi.csdn.net/app_uploads/uFeng/20090111/110410562.p.gif?d=20090111110427937) #e1edfd no-repeat -320px 0px;
PADDING-BOTTOM: 8px; OVERFLOW: auto; BORDER-LEFT: #c3daf9 0px solid; WIDTH: 287px; COLOR: black;
LINE-HEIGHT: 20px; PADDING-TOP: 8px; BORDER-BOTTOM: #c3daf9 1px solid; height: auto; word-break:break-all;
}
.test {width: 300px; height: 200px; text-align: center;}
</style>
<script language="javascript">
//通过id查找对象
function $(id) {
  return document.getElementById(id);
}
//显示/隐藏层
function show(id) {
  var thisDiv = $(id);
  var stateDiv = thisDiv.style.display;  if(stateDiv=='block') {
    thisDiv.style.display = 'none';
  }else {
    thisDiv.style.display = 'block';
    thisDiv.zIndex = '99';    //查找进度条位置
    var bar = $('bar');
    //获取进度条左边距
    var barLeft = getLeft(bar);
    //获取进度条顶边距
    var barTop = getTop(bar);
    //层的定位自己调整
    thisDiv.style.left = barLeft + bar.offsetWidth; //层的左边距
    thisDiv.style.top = barTop; //层的顶边距
    //设置层中的内容
    var str = "<p>";
    str += "ajax提取的内容";//内容根据ajax提取的内容填写
    str += "</p>";
    thisDiv.innerHTML = str;
  }
}
//获得绝对顶边距
function getTop(e){
var ost = e.offsetTop;
while(e=e.offsetParent){
ost += e.offsetTop;
}
return ost;
}
//获得绝对左边距
function getLeft(e){
var osl = e.offsetLeft;
while(e=e.offsetParent){
osl += e.offsetLeft;
}
return osl;
}
</script></head><body>
<div class="test">a</div>
<div class="test">
<span id="bar" onmousemove="show('titlediv');" onmouseout="show('titlediv');">进度条图片</span>
<div id="titlediv" class="title"></div>
</div>
</body>
</html>

该title层显示的位置由//层的定位自己调整
thisDiv.style.left = barLeft + bar.offsetWidth; //层的左边距
thisDiv.style.top = barTop; //层的顶边距
层的顶边距和左边距控制，这里层的显示定位用的是绝对定位
运行程序截图：

另外我想请问一下大家,谈出的那个DIV如何才能自适应,另外谁还有比较好看的那个背景图片,类似于CSDN左侧鼠标滑上去显示的那个对话框效果的图片

http://www.nickstakenburg.com/projects/prototip2/
看看这个，可惜不是免费的哦

Div自适应
//先确定层的宽度，无则为默认宽度
var width = aa ? aa : 200; //aa为给出的固定宽度值//根据显示的内容计算层高度
var len = getStrLengthWithE(showStr);
//公式len * 100/16 / (width-25)) = len*100/(16*(width-25))
//len --> 字符串长度，这里以英文字符为准
//100/16 --> 测试发现，100px一行能排16个英文字符
//width-25 --> css中设置文字显示层左右边距为25px
//17 --> 层上下边距+1,css中定义的
//21 --> 字符高度+1，css中有定义
height = 17 + Math.ceil(len*100/(16*(width-25))) * 21;//取得字符串的长度，以英文字符为准
function getStrLengthWithE(s){
var l = 0,tl = 0;
for(var i=0; i<s.length; i++) {
var c = s.substr(i,1);
tl = c.replace(/[^\x00-\xff]/g,"**").length;
l += tl;
}
return l;
}
至于图片背景需要自己去找，符合页面的色调等

调试易

JAVASCRIPT+CSS的实现效果,求高手指点

解决方案 »