150分求一个JS效果

Question

LZ 很简单的我直接写吧
写的不完整的地方还要你自己修改下
首先思路  鼠标滑动就会出来背景颜色  所以想到了是onmouseover和onmouseout
一经过该地方就有颜色所以是动态改变了 CSS里面的background
比方他是用div布局的
你循环显示记录的时候
给div一个id
<div id="test"+i onmouseover="show('test'+i+)" onmouseout="clear(+i+)">..</div>然后写函数
<script>
show(i){
document.getElementById(i).style.background="#ff0000"; //颜色你自己定义
}
clear(i){
//同理  把背景做成空就好了呵呵~试下吧
}
</sciript>

Answer 1

楼上的朋友,
不是改变背景色
是那个弹出的效果.===============
1.鼠标经过弹出第一个层. 这个层的位置是根据鼠标进入<td>的坐标来判断.
2.点击第一个层内的联接弹出第二个层.在第二个层不关闭的状态下,鼠标再经过任何<tr>内的<td>都不弹出其他层

Answer 2

那就有点麻烦了
你可以参考下他写的
<style type="text/css">#gbar{float:left;height:22px;padding-left:0px}.gbh,.gb2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}.gbh{position:absolute;top:24px;width:100%}.gb2 div{margin:5px}#gbi{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;top:24px;z-index:1000}#guser{padding-bottom:7px !important}#gbar,#guser{font-size:13px;padding-top:0px !important}@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}#gbi,.gb2{left:0;position:absolute;visibility:hidden}.gb2{z-index:1001}#gbar a{color:#00c}.gb2 a,.gb3 a{text-decoration:none}#gbar .gb2 a:hover{background:#36c;color:#fff;display:block}</style>
  <script type="text/javascript">window.gbar={};(function(){function e(a,c,d){var b="on"+c;if(a.addEventListener)a.addEventListener(c,d,false);else if(a.attachEvent)a.attachEvent(b,d);else{var h=a[b];a[b]=function(){var i=h.apply(this,arguments),g=d.apply(this,arguments);return i==undefined?g:(g==undefined?i:g&&i)}}};var f=window.gbar,j,k,o;f.qs=function(a){var c=window.encodeURIComponent&&(document.forms[0].q||"").value;if(c)a.href=a.href.replace(/([?&])q=[^&]*|$/,function(d,b){return(b||"&")+"q="+encodeURIComponent(c)})};function p(a,c,d){a.visibility=o?"hidden":"visible";a.left=c+"px";a.top=d+"px"}f.tg=function(a){var c=0,d=0,b,h=0,i,g=window.navExtra,n,l=document,m=0;k=k||l.getElementById("gbar").getElementsByTagName("span");(a||window.event).cancelBubble=!h;if(!j){j=l.createElement(Array.every||window.createPopup?"iframe":"DIV");j.frameBorder="0";j.scrolling="no";j.src="javascript:''";k[7].parentNode.appendChild(j).id="gbi";if(g&&k[7])for(i in g){n=l.createElement("span");n.appendChild(g[i]);k[7].parentNode.insertBefore(n,k[7]).className="gb2"}e(l,"click",f.close)}while(b=k[++h]){if(d){p(b.style,d+1,c+25);{c+=9;if(!(b.firstChild.tagName=="DIV")){c+=11;m=Math.max(m,b.offsetWidth)}}}if(b.className=="gb3"){do d+=b.offsetLeft;while(b=b.offsetParent)}}{h=0;while(b=k[++h])if(b.className=="gb2")b.style.width=m+"px";j.style.width=m+"px"}j.style.height=c+"px";p(j.style,d,24);o=!o};f.close=function(a){o&&f.tg(a)}})();</script>

Answer 3

你一个个按回车就出来了 呵呵~
他用的是事件  很麻烦的哈
其实有一个办法就是显示一个DIV 开始把他DISPLAY:NONE 
可是那个位置怎么定的  
应该是根据TD的与TOP的位置也就是TD的ID.STYLE.LEFT

Answer 4

http://topic.csdn.net/t/20040330/16/2904539.html

Answer 5

<a href="#" style="color:blue" onMouseOver="document.all.Layer1.style.visibility=''" 
     onMouseOut="document.all.Layer1.style.visibility='hidden'"> 鼠标划过时显示/隐藏信息</a> <div id="Layer1" style="position:absolute; width:300px; height:100px; z-index:1; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px none #000000; visibility: hidden">要隐藏的数据</div> 

Answer 6

楼上2层 回答的让我失望了点 哈哈!!...
位置好定,  在onmouseover的时候获取clientX的坐标就可以了...============================我不是只实现弹出层的效果. 这个效果很多方法可以实现的.bhtfg538应该知道我问的是什么.
现在主要的问题在:1.获取鼠标坐标的时候. 从<td>内的<a>下来之后会再获取一次(多余了,麻烦)
2.弹出第二个层之后(如果不点击关闭),鼠标再经过<td>,我不想再执行onmouseover了.
   (暂时我是加了个层在后面挡者,全透明).

Answer 7

晕死，我知道你的意思，我之前给你的例子你根本没测试完，我给你的那个就是弹出第二个层没有关闭之前你鼠标经过<td>不会onmouseover

Answer 8

还有，GOOGLE中的JS是这样的：<script type="text/javascript">window.gbar=
{
};
(function()
{
function e(a,c,d)
{
  var b="on"+c;
  if(a.addEventListener)a.addEventListener(c,d,false);
  else if(a.attachEvent)a.attachEvent(b,d);
  else
  {
    var h=a[b];
    a[b]=function()
    {
      var i=h.apply(this,arguments),g=d.apply(this,arguments);
      return i==undefined?g:(g==undefined?i:g&&i)
    }
  }
};
var f=window.gbar,j,k,o;
f.qs=function(a)
{
  var c=window.encodeURIComponent&&(document.forms[0].q | |"").value;
  if(c)a.href=a.href.replace(/([?&])q=[^&]* |$/,function(d,b)
  {
    return(b | |"&")+"q="+encodeURIComponent(c)
  }
  )
};
function p(a,c,d)
{
  a.visibility=o?"hidden":"visible";
  a.left=c+"px";
  a.top=d+"px"
}
f.tg=function(a)
{
  var c=0,d=0,b,h=0,i,g=window.navExtra,n,l=document,m=0;
  k=k | |l.getElementById("gbar").getElementsByTagName("span");
  (a | |window.event).cancelBubble=!h;
  if(!j)
  {
    j=l.createElement(Array.every | |window.createPopup?"iframe":"DIV");
    j.frameBorder="0";
    j.scrolling="no";
    j.src="javascript:''";
    k[7].parentNode.appendChild(j).id="gbi";
    if(g&&k[7])for(i in g)
    {
      n=l.createElement("span");
      n.appendChild(g[i]);
      k[7].parentNode.insertBefore(n,k[7]).className="gb2"
    }
    e(l,"click",f.close)
  }
  while(b=k[++h])
  {
    if(d)
    {
      p(b.style,d+1,c+25);
      {
        c+=9;
        if(!(b.firstChild.tagName=="DIV"))
        {
          c+=11;
          m=Math.max(m,b.offsetWidth)
        }
      }
    }
    if(b.className=="gb3")
    {
      do d+=b.offsetLeft;
      while(b=b.offsetParent)
    }
  }
  {
    h=0;
    while(b=k[++h])if(b.className=="gb2")b.style.width=m+"px";
    j.style.width=m+"px"
  }
  j.style.height=c+"px";
  p(j.style,d,24);
  o=!o
};
f.close=function(a)
{
  o&&f.tg(a)
}
}
)();
</script>

Answer 9

GOOGLE定顶部的CSS
<style type="text/css">
#gbar{float:left;height:22px;padding-left:0px}
.gbh,.gb2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}
.gbh{position:absolute;top:24px;width:100%}
.gb2 div{margin:5px}
#gbi{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;top:24px;z-index:1000}
#guser{padding-bottom:7px !important}
#gbar,#guser{font-size:13px;padding-top:0px !important}
@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}
#gbi,.gb2{left:0;position:absolute;visibility:hidden}
.gb2{z-index:1001}#gbar a{color:#00c}
.gb2 a,.gb3 a{text-decoration:none}
#gbar .gb2 a:hover{background:#36c;color:#fff;display:block} </style> 

Answer 10

  综合上面的分析，感觉这个效果也不是很难，首先，弹出层这个效果LZ已经会做了，现在要解决的就是根据鼠标进入的位置来决定弹出层的位置，这也不难，利用event.clinetX和event.clientY分别取得鼠标的坐标，然后弹出层的left和top就根据这个鼠标坐标来决定。
   另外，LZ说的当点击弹出层的连接在弹出层后，如果没有关闭这个层，就不会在弹出层，这个也不难啊，只需要设置一个变量，当已经有弹出层的时候，设置该变量为False,否则为true。然后在写弹出第一个层的函数的时候，用一个条件语句判断该变量是否为true，如果为true,则执行弹出层的效果，否则就退出该函数，不弹出层。

Answer 11

以下是整个代码，自己适当的修改一下就行了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var flag=true; //判断是否有第二个子菜单弹出
/*
   功能：当鼠标位于第一个层上时，实现该层的颜色改变
   参数：层的id
*/
function menu1(id)
{
 var obj= document.getElementById(id);
if(obj)
{
obj.style.background='#cccccc';    //改变鼠标所在层的背景颜色
if(flag)
{
  sonmenu(id);    //弹出菜单
}
}
}
/*
   功能：当鼠标离开第一个层上时，实现该层的颜色恢复
   参数：层的id
*/
function dismenu1(id)
{
 var obj= document.getElementById(id);
if(obj)
{
obj.style.background='#ffffff';    //改变鼠标所在层的背景颜色
dissonmenu();           //实现弹出菜单消失
}
}
/*
   功能：当鼠标位于第一个层上时，实现弹出菜单
   参数:id为第一层的id
*/
function sonmenu(id)
{
   var x=event.clientX;  //获得鼠标的位置  
   var obj= document.getElementById('son');
   if(obj)
   {
       obj.style.left=x;
   obj.style.top=parseInt(document.getElementById(id).style.top)+parseInt(document.getElementById(id).style.height);
   obj.style.display='block';
   }
}
/*
   功能：当鼠标离开第一个层上时，实现弹出菜单消失
*/
function dissonmenu()
{
   var obj= document.getElementById('son');
   if(obj)
   {
    //   obj.style.display='none';
   }
}
/*
  功能:实现弹出第二个菜单  
*/
function twoson()
{
    var obj= document.getElementById('twoson');
obj.style.left=document.getElementById('son').style.left;
obj.style.top=parseInt(document.getElementById('son').style.top)-10;
document.getElementById('son').style.display='none';
flag=false;
obj.style.display='block';

}
/*
   功能：第二个菜单消失
*/
function re()
{
   document.getElementById('twoson').style.display='none';
   flag=true;
}
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; width:556px; height:24px; z-index:1; left: 170px; top: 52px;  border: 1px solid #ffcfff;" onMouseOver="menu1('Layer1')" onMouseOut="dismenu1('Layer1')">鼠标移动上来看效果</div>
<div id="Layer2" style="position:absolute; width:558px; height:24px; z-index:2; left: 169px; top: 80px; border: 1px solid #ffcfff;"  onMouseOut="dismenu1('Layer2')" onMouseOver="menu1('Layer2')">鼠标移动上来看效果</div>
<div id="Layer3" style="position:absolute; width:558px; height:24px; z-index:3; left: 169px; top: 109px; border: 1px solid #ffcfff;" onMouseOut="dismenu1('Layer3')" onMouseOver="menu1('Layer3')">鼠标移动上来看效果</div>
<div id="Layer4" style="position:absolute; width:559px; height:24px; z-index:4; left: 169px; top: 138px;  border: 1px solid #ffcfff;" onMouseOut="dismenu1('Layer4')" onMouseOver="menu1('Layer4')">鼠标移动上来看效果</div>
<div id='son' style='position:absolute; width:100px;display:none; height:54px; z-index:5; border: 1px solid red;'><a href='javascript:twoson()'>点这里</a></div>
<div id='twoson' style='position:absolute; width:200px;display:none; height:154px; z-index:6; border: 1px solid red;'><a href='javascript:re()'>点这里</a></div>
</body>
</html>

Answer 12

楼上的已经很完整了，不过直接使用title来显示不可以吗？

Answer 13

感谢!
收下
给分.
=======================
FF下获取不到event, 我改了下 传了个event进去<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档 </title>
<script language="javascript">
var flag=true; //判断是否有第二个子菜单弹出
/*
   功能：当鼠标位于第一个层上时，实现该层的颜色改变
   参数：层的id
 */
function menu1(id,event)
{
var obj= document.getElementById(id);
if(obj)
{
obj.style.background='#cccccc';    //改变鼠标所在层的背景颜色
if(flag)
{
sonmenu(id,event);    //弹出菜单
}
}
}
/*
   功能：当鼠标离开第一个层上时，实现该层的颜色恢复
   参数：层的id
 */
function dismenu1(id)
{
var obj= document.getElementById(id);
if(obj)
{
obj.style.background='#ffffff';    //改变鼠标所在层的背景颜色
dissonmenu();           //实现弹出菜单消失
}
}
/*
   功能：当鼠标位于第一个层上时，实现弹出菜单
   参数:id为第一层的id
 */
function sonmenu(id,event)
{
var x=event.clientX;  //获得鼠标的位置  
var obj= document.getElementById('son');
if(obj)
{
obj.style.left=x;
obj.style.top=parseInt(document.getElementById(id).style.top)+parseInt(document.getElementById(id).style.height);
obj.style.display='block';
}
}
/*
   功能：当鼠标离开第一个层上时，实现弹出菜单消失
 */
function dissonmenu()
{
var obj= document.getElementById('son');
if(obj)
{
//   obj.style.display='none';
}
}
/*
   功能:实现弹出第二个菜单  
 */
function twoson()
{
var obj= document.getElementById('twoson');
obj.style.left=document.getElementById('son').style.left;
obj.style.top=parseInt(document.getElementById('son').style.top)-10;
document.getElementById('son').style.display='none';
flag=false;
obj.style.display='block';}
/*
   功能：第二个菜单消失
 */
function re()
{
document.getElementById('twoson').style.display='none';
flag=true;
}
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; width:556px; height:24px; z -index:1; left: 170px; top: 52px;  border: 1px solid #ffcfff;" onMouseOver ="menu1('Layer1',event)" onMouseOut="dismenu1('Layer1')"><a href="#">鼠标移动上来看效果</a></div>
<div id="Layer2" style="position:absolute; width:558px; height:24px; z -index:2; left: 169px; top: 80px; border: 1px solid #ffcfff;"  onMouseOut ="dismenu1('Layer2')" onMouseOver="menu1('Layer2',event)">鼠标移动上来看效果 </div>
<div id="Layer3" style="position:absolute; width:558px; height:24px; z -index:3; left: 169px; top: 109px; border: 1px solid #ffcfff;" onMouseOut ="dismenu1('Layer3')" onMouseOver="menu1('Layer3',event)">鼠标移动上来看效果 </div>
<div id="Layer4" style="position:absolute; width:559px; height:24px; z -index:4; left: 169px; top: 138px;  border: 1px solid #ffcfff;" onMouseOut ="dismenu1('Layer4')" onMouseOver="menu1('Layer4',event)">鼠标移动上来看效果 </div>
<div id='son' style='position:absolute; width:100px;display:none; height:54px; z-index:5; border: 1px solid red;'> <a href='javascript:twoson()'>点这里 </a> </div>
<div id='twoson' style='position:absolute; width:200px;display:none; height:154px; z-index:6; border: 1px solid red;'> <a href='javascript:re()'>点这里 </a> </div>
</body>
</html>