鼠标移到指定范围,显示一个跟随鼠标的层

来源:互联网 发布:语音搜索软件 编辑:程序博客网 时间:2024/04/27 18:28

<script type="text/javascript">
//鼠标移到指定范围,显示一个跟随鼠标的层

function showTip(div_N)
//div_N 为层的名称参数

// 调用方法(在指定范围加上)onmousemove="showTip(层的名称)" onmouseout="closeTip(层的名称)"
// <div id="层的名称" style="display:none;font-color=#FF0000;font-weight:bold;font-size:18px;">这里是要显示出来的!</div>

{
var div1 = document.getElementById(div_N); //将要弹出的层
div1.style.display="block"; //div1初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div1.style.left=event.clientX+15; //鼠标目前在X轴上的位置,加15是为了向右边移动10个px方便看到内容
div1.style.top=parseInt(event.y)+5+document.body.scrollTop; //减去滚动条的高度
div1.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动
}
//关闭层div1的显示
function closeTip(div_N)
{
var div1 = document.getElementById(div_N);
div1.style.display="none";
}
</script>

 

<div   id=<%#Eval("id") %> title='<%#Eval("title") %>' onmouseover="tt(this);" onmouseout="cc(this);" style=' position:absolute;left:<%#GetLeft(Eval("zb").ToString())%>px;top:<%#GetTop(Eval("zb").ToString())%>px;right:<%#Getright(Eval("zb").ToString())%>px;bottom:<%#Getbottom(Eval("zb").ToString())%>px;height:<%#Getheight(Eval("zb").ToString())%>px;width:<%#Getwidth(Eval("zb").ToString())%>px;' onclick="javascript:window.open('dsbview.aspx?id=<%#Eval("id") %>&qkh=<%#Eval("zkh") %>&bm=<%#Eval("bm") %>')" >
</div>

 

function tt(st) {

        var va = st.id;


        document.getElementById(va).className = 'c';

        var x = window.event.x;
        var y = window.event.y;

        var div = document.getElementById("divxianshi");
        div.style.display = "block";
        div.style.top = y;
       div.style.left = x;
       div.style.position = "absolute";
        div.innerHTML = st.title;
        //alert(div.style.top);

 

    }