Posted on 2008-04-23 17:41
G_G 阅读(1617)
评论(1) 编辑 收藏 所属分类:
javascript
此代码可以直接使用
<body>
<a id='pi' href="" value="text"> text </a>
<div id='div1'/>
</body>
<script type="text/javascript">
function showByEvent(ev,divId){
//取得各浏览器 event
ev = ev || window.event;
//div
var useDiv = document.getElementById(divId);
useDiv.style.position="absolute";
if( useDiv.style.left=="" )useDiv.style.left = "50";
if( useDiv.style.top=="" )useDiv.style.top = "10";
if( useDiv.style.zIndex=="" )useDiv.style.zIndex = "1000";
if( useDiv.style.padding=="" )useDiv.style.padding = "0px";
if( useDiv.style.backgroundColor=="" )useDiv.style.backgroundColor = "#FFFFCC";
if( useDiv.style.color=="" )useDiv.style.color = "#201000";
if( useDiv.style.fontSize=="" )useDiv.style.fontSize = "12px";
if( useDiv.style.border=="" )useDiv.style.border ="1px solid #284860";
//得到处发事件的源element
var actionBean = null ;
if( ev.srcElement ){
actionBean = ev.srcElement
}else{
actionBean = ev.target;
}
//处发事件
useDiv.onmousemove = function(){
useDiv.style.visibility = "";
}
useDiv.onmouseout = function(){
useDiv.style.visibility = "hidden";
}
actionBean.onmouseout = function mouseOut(ev){
useDiv.style.visibility = "hidden";
}
//div 定位
useDiv.style.left = actionBean.offsetTop+15 ;
useDiv.style.top = actionBean.offsetLeft+15;
//返回类型为 div 显示的 x , y 和 target 处发源项 和 div
return {
y: actionBean.offsetTop+15 ,
x: actionBean.offsetLeft+15 ,
target:actionBean,
div:useDiv
}
}
//事件添加
document.getElementById('pi').onmousemove = function(ev){
var sbv = showByEvent(ev,"div1");
var bean = sbv.target ;
var dd = sbv.div;
dd.style.visibility = "";
dd.innerHTML = "<a href=http://www.baidu.com>删除"+bean.value+"</a><br>"+
"<a href=http://www.google.com>详细 by Id "+bean.id+"</a>";
};
</script>