日期:2014-05-16  浏览次数:20353 次

鼠标放上弹出一个详细内容框
CSDN这个论坛上就是放在头像上弹出用户信息的框,是怎么实现的啊?我现在要实现这个效果。求助

------解决方案--------------------
<img onmouseover="try{showUserCard(this,'fenyao')}catch(ex){};" alt="fenyao用户头像" title="fenyao用户自定义头像" src="http://avatar.profile.csdn.net/7/2/0/2_fenyao.jpg">

function showUserCard(sender, username) {
if (!window.loaded) return; // 未加载
if (!currentUserCard) {
//if (!panelTopicAdmin) return;
currentUserCard = new CsdnUserCard(); //*/
}
var point = absolutePoint(sender);
currentUserCard.owner = sender;
currentUserCard.show(point.x + 65, point.y, username, sender.src);
currentUserCard.mouseover = function(e) {
var element = typeof event != "undefined" ? event.srcElement : e.target;
var hotCard = false;
while (element) {
hotCard = element == currentUserCard.owner || element == currentUserCard.div_card;
if (hotCard) break;
element = element.parentNode;
}
if (!hotCard) {
removeEventHandler(document, "mouseover", currentUserCard.mouseover);
currentUserCard.close();
}
}
addEventHandler(document, "mouseover", currentUserCard.mouseover);
}

用jquery 应该很多这种插件的.

------解决方案--------------------
可以用jquery的mouseover/mouseout或者mouseenter/ mouseleave.
例子很多,google搜索一下: jquery thumbnail hover zoom
------解决方案--------------------
设置下新的div的位置,(.style.position="";.style.top=;.style.left=;)
------解决方案--------------------
层的位置