求一段JS

ZXY900213 2010-09-09 03:29:31

效果是这样的。比如页面上有很多用户的头像，移上去，弹出一个层，该层的位置就在头像的旁边，里面显示该用户的详细信息。移开就隐藏了。如果还不明白的话，就在你当前浏览的页面，你看到左边的头像没？移上去瞧瞧，就是这种效果。我自己也做了一个，是用onmousemove和onmouseover控制的，但是如果鼠标快速的移开，那个层不会隐藏，需要缓缓的移开，才能够隐藏。搞得很郁闷，希望哪位高人能够贴点源码上来，小弟不胜感激...

...全文

164 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

caixueqing123 2012-06-14

打赏
举报

------自己写的一个，试试看
<html>
<head><title>test</title>
<style type="text/css">

</style>
<script language="javascript">
function showDiv(){
clearTimeout(time1);
var hidDiv=document.getElementById('hiddenDiv');
if(document.getElementById('hiddenDiv').style.display=="none"){
hidDiv.style.top=window.event.clientY+5;
hidDiv.style.left=window.event.clientX+5;
hidDiv.style.display="block";
}
else{document.getElementById('hiddenDiv').style.display="block";}
}

function delay(){

document.getElementById('hiddenDiv').style.display="none";
}
function hidDiv(){
//clearTimeout(time1);
time1=setTimeout("delay()",500);

}
function delayHid(){
clearTimeout(time1);
}
</script>
</head>

<body>
<div id="hiddenDiv" onMouseOver="delayHid();" onMouseOut="hidDiv();">姓名：----<br/>
<a href="javascipt:void(0)">性别：男</a><br/>
<a href="javascript:void(0)">爱好：篮球</a><br/>
特长：编程<br/>
年龄：23岁
</div>
<a href="javascript:void(0)" onMouseOver="showDiv();" onMouseOut="hidDiv();">

show

</a>
</body>

</html>

PrivateBoy 2010-09-13

打赏
举报

var obj = document.getElementById(o + "_temp"); 这个是错误的，应该是
var obj = document.getElementById(o.id + "_temp");

ZXY900213 2010-09-10

打赏
举报

[Quote=引用 8 楼 privateboy 的回复:]
使用：

HTML code

<div onmousemove="Description(this,'<div style=color:red;>hiadfasdfasdfasdfsdf</div>')">
adfasdfasdf</div>
[/Quote]
先谢了，但是我还有很多疑问：if (!obj)和while (o) 这两个地方，那个obj和o明明是一个标签元素，为什么能作为条件来判断？
var obj = document.getElementById(o + "_temp");还有这里，那个o明明是个div对象，把一个对象加上一个字符串是什么意思呢？你再根据这个相加后的字符串作为id去找元素，结果肯定为空啊。这是不是没必要呢？而且效果好像跟我描述的不一样，所有弹出的div的位置都一样。请这位大哥能细心指教。到时一定加分...

root_lee 2010-09-10

打赏
举报

with 语句
为语句设定默认对象。

with (object)
statements

参数
object

新的默认对象。

statements

一个或多个语句，object 是该语句的默认对象。

说明
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用：

x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10)
y = Math.tan(14 * Math.E)
当使用 with 语句时，代码变得更短且更易读：

with (Math){
x = cos(3 * PI) + sin (LN10)
y = tan(14 * E)
}

ZXY900213 2010-09-10

打赏
举报

[Quote=引用 7 楼 privateboy 的回复:]
今天G心情好，发一个你看看，

JScript code

function Description(o, strHtml) {
var obj = document.getElementById(o + "_temp");
if (!obj) {
var a = document.createElement("div");……
[/Quote]
能顺便问下吗？javacript里面的with关键字有什么作用？

chenbb110 2010-09-10

打赏
举报

但是如果鼠标快速的移开，那个层不会隐藏，需要缓缓的移开，才能够隐藏

这个可能要加另外的方法

chenbb110 2010-09-10

打赏
举报

我做的和你类似,可能和你的要求有些差距,我的是把鼠标移上去,访问数据库查询数据,然后把查询出来的数据写到一个隐藏的层中,然后在把隐藏的层显示出来.
//得到鼠标的当前位置
var mouseXPoint = event.clientX;
var mouseYPoint = event.clientY;
//给隐藏层赋值
document.getElementById("lbusernamevalue").innerHTML = userinfo.data[0].UserName;
document.getElementById("lbuseraddressvalue").innerHTML = userinfo.data[0].UserAddress;
document.getElementById("lbusermobilevalue").innerHTML = userinfo.data[0].UserMobile;
document.getElementById("lbusersexvalue").innerHTML = userinfo.data[0].UserSex;
document.getElementById("lbuserbirthdayvalue").innerHTML = userinfo.data[0].UserBth;
showTip();//调用方法把层显示出来

function showTip() {
var div3 = document.getElementById('div_userinfo'); //得到将要弹出的层
div3.style.display = "block"; //div3初始状态是不可见的，设置可为可见
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left = mouseXPoint - 15; //鼠标目前在X轴上的位置，减是为了向左边移动15个px方便看到内容
div3.style.top = mouseYPoint + 15;
div3.style.position = "absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动

}

这样就可以了不过可能和你要求的有些差距,供参考

hoojo 2010-09-09

打赏
举报

[Quote=引用楼主 zxy900213 的回复:]
效果是这样的。比如页面上有很多用户的头像，移上去，弹出一个层，该层的位置就在头像的旁边，里面显示该用户的详细信息。移开就隐藏了。如果还不明白的话，就在你当前浏览的页面，你看到左边的头像没？移上去瞧瞧，就是这种效果。我自己也做了一个，是用onmousemove和onmouseover控制的，但是如果鼠标快速的移开，那个层不会隐藏，需要缓缓的移开，才能够隐藏。搞得很郁闷，希望哪位高人能够贴点源码上来，……
[/Quote]

直接给当前图片添加onmouseover、onmouseout事件，事件不要搞错了

首先移到图片上显示div，主要div要和img连接起来。不要隔得距离太大

这样当鼠标移到图片外面去的时候，还来不及点div就隐藏了

在div、img添加鼠标离开的事件，离开隐藏

碧海情天-赵亮 2010-09-09

打赏
举报

主要是布局问题,调整一下.不行就给周围的对象加上鼠标进入事件,在里面关闭这个弹出层.

PrivateBoy 2010-09-09

打赏
举报

记得给分哦

PrivateBoy 2010-09-09

打赏
举报

使用：



<div  onmousemove="Description(this,'<div style=color:red;>hiadfasdfasdfasdfsdf</div>')">

adfasdfasdf</div>

PrivateBoy 2010-09-09

打赏
举报

今天G心情好，发一个你看看，



function Description(o, strHtml) {

        var obj = document.getElementById(o + "_temp");

        if (!obj) {

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

            with (a.style) {

                background = '#f3f3f3';

                border = '1px solid #ccc';

                fontSize = '12px';

                position = 'absolute';

                lineHeight = "22px";

                left = loc(o, "Left") + 60 + "px";

                

                top = loc(o, "Top") + o.offsetHeight - 22 + "px";

                padding = "1px";

                width = 'auto';

                height = 'auto';

                overflow = 'hidden';

                display = "block";

            }

            a.id = o + '_temp';

            document.body.appendChild(a);

            a.innerHTML = strHtml;

        }

        else {

            obj.style.display = "block";

            obj.innerHTML = strHtml;

        }

        o.onmouseout = function(e) { clear(e, o + "_temp"); }        

    }

    function loc(o, sProp) {

        var i = 0;

        while (o) {

            i += o["offset" + sProp];

            if (o.offsetParent) { if (o.offsetParent.style.position == "absolute") return i; }

            o = o.offsetParent;

        } return i;

    }

function clear(e, popid) { e = window.event || e; var s = e.relatedTarget || e.toElement; var pop = document.getElementById



(popid); if (pop && s) { pop.style.display = (pop == s || s == pop.parentNode || s == s.parentNode) ? "block" : "none"; 



pop.onmouseover = function(e) { this.style.display = "block"; }; pop.onmouseout = function(e) { this.style.display = "none"; 



}; } }