效果是这样的。比如页面上有很多用户的头像,移上去,弹出一个层,该层的位置就在头像的旁边,里面显示该用户的详细信息。移开就隐藏了。如果还不明白的话,就在你当前浏览的页面,你看到左边的头像没?移上去瞧瞧,就是这种效果。我自己也做了一个,是用onmousemove和onmouseover控制的,但是如果鼠标快速的移开,那个层不会隐藏,需要缓缓的移开,才能够隐藏。搞得很郁闷,希望哪位高人能够贴点源码上来,小弟不胜感激...
解决方案 »
- 求教啊!谁能帮我分析下这段代码,感谢了!
- 怎么获取table中td里input类型的值?
- 求:将鼠标放在文字上,即在鼠标旁边显示相应的图片的效果代码
- 求一全屏、没有最小化最大化关闭按钮、打开网页就能执行的javascript
- 如何在一个文本框上面做一个跟windows开始菜单哪儿一样效果的js特效呢?
- [HB]关于数字转成ASC码的问题
- 怎么返回当前已经移除的元素
- 如何在javascript的onclick事件中写关闭当前窗口的脚本?
- 分数不多..不过还是谢谢大家帮忙!!!在线等待ing
- 有没有办法放置一个有角度的button,比如放置一个与水平线成30度角的button
- 关于opener的问题
- 框架收收缩问题???
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"; }; } }
<div onmousemove="Description(this,'<div style=color:red;>hiadfasdfasdfasdfsdf</div>')">
adfasdfasdf</div>
首先移到图片上显示div,主要div要和img连接起来。不要隔得距离太大
这样当鼠标移到图片外面去的时候,还来不及点div就隐藏了
在div、img添加鼠标离开的事件,离开隐藏
//得到鼠标的当前位置
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层无法跟着鼠标动
}这样就可以了 不过可能和你要求的有些差距,供参考
为语句设定默认对象。 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)
}
var obj = document.getElementById(o + "_temp");还有这里,那个o明明是个div对象,把一个对象加上一个字符串是什么意思呢?你再根据这个相加后的字符串作为id去找元素,结果肯定为空啊。这是不是没必要呢?而且效果好像跟我描述的不一样,所有弹出的div的位置都一样。请这位大哥能细心指教。到时一定加分...
var obj = document.getElementById(o.id + "_temp");
<html>
<head><title>test</title>
<style type="text/css">
<!--
#hiddenDiv { font-size: 12px; background-color: #CCCCCC; display: none; padding: 8px; height: 200px; width: 300px; border: 1px solid #000000; overflow: auto;position: absolute; style="z-index: 9999999; }
-->
</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>