跟随鼠标显示的DIV

最新推荐文章于 2022-07-20 17:36:59 发布

weixin_30951389

最新推荐文章于 2022-07-20 17:36:59 发布

阅读量104

点赞数

文章标签： javascript xhtml c# ViewUI

原文链接：http://www.cnblogs.com/wq3if2in/articles/1336712.html

版权

前段时间要实现一个效果，当鼠标点击某列表中的一行时，弹出个DIV显示该行中的所有内容，所以要实现的是

当点击出现DIV时，这个弹出的DIV是捕捉到鼠标坐标后显示的，这样就能体现出点击的是哪行，显示的是哪行

的内容了，简单代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>

function followcursor(){
var DIV = document.getElementById('div01');
DIV.style.display = "block";
DIV.style.left=document.body.scrollLeft+event.clientX+10
DIV.style.top=document.body.scrollTop+event.clientY+10
}
</script>

</head>
<body>
    <form id="form1" runat="server">
        <div style="width: 300px; height: 300px; border: solid 1px #ccc; display: none;position:absolute;"
            id="div01">
            跟随鼠标显示的DIV<a href="javascript:void(0)" οnclick="document.getElementById('div01').style.display='none';">关闭</a>
        </div>
        <div>
            <a href="javascript:void(0)" οnclick="followcursor();">点一</a></div>
        <div style="position: absolute; top: 300px; left: 400px;">
            <a href="javascript:void(0)" οnclick="followcursor();">点二</a></div>
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/wq3if2in/articles/1336712.html

weixin_30951389

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟随鼠标显示的DIV

前段时间要实现一个效果，当鼠标点击某列表中的一行时，弹出个DIV显示该行中的所有内容，所以要实现的是当点击出现DIV时，这个弹出的DIV是捕捉到鼠标坐标后显示的，这样就能体现出点击的是哪行，显示的是哪行的内容了，简单代码如下：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx....
复制链接

扫一扫