鼠标移上去,显示一个动态层

love198613 2009-04-16 04:34:40

这个企业是动态添加进来,当鼠标划上去的时候动态的显示一个层，显示这个企业所招聘的职位

求源码..希望有达人认真解惑..谢谢

...全文

819 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

果然如此 2009-04-19

打赏
举报

<!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>Untitled Document</title>
<script type="text/javascript">
function $(ID)
{return document.getElementById(ID);}

function saet(o)
{
var x=y=0;
do{
x+=o.offsetLeft;
y+=o.offsetTop;
}
while (o=o.offsetParent);
return {"x":x,"y":y};
}

function openwindow(thisObj,openAId,openBId,imgupId,num)
{

var x=saet(thisObj).x;
var y=saet(thisObj).y;
var height = thisObj.offsetHeight;
var newy = y + height;
var newx = x + num;
if($(openAId).style.display=="none")
{
$(openAId).style.display="";
$(openAId).style.top=newy+"px";
$(openAId).style.left=newx+"px";
$(openBId).style.display="";
$(imgupId).src="http://www.baidu.com/img/logo-yy.gif"
}
else
{
$(openAId).style.display="none";
$(openBId).style.display="none";
$(imgupId).src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"
}
document.body.onclick=function ()
{
$("openA").style.display="none";
$("openB").style.display="none";

}
}

function close1(closeAId,closeBId)
{

$(closeAId).style.display="none";
$(closeBId).style.display="none";

/*if($(closeAId).style.display=="")
{
$(closeAId).style.display="none";
$(closeBId).style.display="none";
$(imgupId).src="http://www.baidu.com/img/logo-yy.gif"
}
else
{
$(closeAId).style.display="none";
$(closeBId).style.display="none";
$(imgupId).src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"
}*/
}

</script>

</head>

<body>

<div id="linkopen" style=" cursor:pointer; font-weight:bold; margin-left:200px; width:200px; background:#CCCC33; line-height:100px; color:#FF0000" onmouseover="openwindow(this,'openA','openB','imgup',0)" >点击显示层</div>

<div id="linkopen" style=" cursor:pointer; font-weight:bold; margin-left:200px; width:200px; background:#CCC33C; line-height:100px; color:#FF0000" onclick="openwindow(this,'openA','openB','imgup',200)">点击显示层</div>

<div id="linkopen" style=" cursor:pointer; font-weight:bold; margin-left:200px; width:200px; background:#C33CCC; line-height:100px; color:#FF0000" onclick="openwindow(this,'openA','openB','imgup',200)">点击显示层</div>

<div id="openA" style="display:none; height:200px; width:600px; left:0px; top:0px; position:absolute; z-index:3; background:#00f" onmouseout="close1('openA','openB')"></div>
<div id="openB" style="display:none; height:200px; width:600px; background:#0f0"></div>
<img id="imgup" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
</body>
</html>

点击鼠标弹出层

staywithc 2009-04-19

打赏
举报

前端时间写的鼠标悬停提示层：
结合了JQEURY



function myToolTip()

{

  var d = document.createElement("div");

  var ww = $("input[tip]").offset();

  

  $("input[tip]").each(function(i){

    $(this).hover(

      function(){

      

      d.style.top = $(this).offset().top + 20;

      d.style.left = $(this).offset().left;

      $(d).addClass("myToolTip");

      $(d).html($(this).attr("tip"));

      document.body.appendChild(d);

    },

    function(){

      //document.body.removeChild(d);

      $(d).remove();

    }

    );

  });

  

  $("input[tip]").each(function(i){

    $(this).click(function(){

      document.body.removeChild(d);

    });



  });

}

jfd198512 2009-04-19

打赏
举报

顶~

皓月明 2009-04-18

打赏
举报

去河北搜才网弄代码吧，那里有

jhdxhj 2009-04-18

打赏
举报

ding

major 2009-04-18

打赏
举报

给你一个例子看看是不是这种效果.
http://xianexs.mail.foxmail.com/cgi-bin/downloadfilepart/svrid208/AjaxGridViewDetailDemo.rar?svrid=208&fid=23b5972b8b2efd7c7f31c74c26e578b4b9feacd74ed15bcf&&txf_fid=378bacc179387b0004a4606d599c9e1f4d11e19f&&txf_sid=2e5dc03c2c77b410e07c64b51cfeddd737cc5e10