js實現鼠標移動提示框架信息

关注

原创最新推荐文章于 2026-05-09 09:52:49 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

鼠标移动显示tip信息实现了：点击按钮显示不同信息根据鼠标位置显示不同信息提示界面：代码： html：在这里插入代码片 css：在这里插入代码片 js：在这里插入代码片阅读详情

<html>
<head>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
<title>鼠标提示</title>
<script   language="JavaScript">
function   seashowtip(tips,flag,iwidth){
var   my_tips=document.all.mytips;
if(flag){
          my_tips.innerHTML=tips;
          my_tips.style.display="";
          my_tips.style.width=iwidth;
          my_tips.style.height=iwidth;
          my_tips.style.left=event.clientX+10+document.body.scrollLeft;
          my_tips.style.top=event.clientY+10+document.body.scrollTop;

    //document.getElementById("lbl").innerHTML=tips;
    my_tips.innerHTML="<table><tr><td>"+tips+"</td></tr></table>";
        }
else
      {
        my_tips.style.display="none";
        }
}
</script>
<style>
body{font-size:12px}
</style>
<div   id=mytips   style="position:absolute;background-color:#ffffff;width:121;height:16;border:1px   solid   gray;display:none;filter:   progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);   left:0;   top:5"></div>
</head>
<body>
<form   name="form1"   method="post"   action="">
      用户名：
      <input   type="text"   name="textfield"     tips="***   输入用户名."   onmousemove=seashowtip(this.tips,1,150)   onmouseout=seashowtip(this.tips,0,150)>
      <br/>
      密    码：
      <input   type="text"   name="textfield2"     tips="***   输入密码."   onmousemove=seashowtip(this.tips,1,150)   onmouseout=seashowtip(this.tips,0,150)>
      <br/>
      验证码：
      <input   type="text"   name="textfield3"     tips="***   输入验证码."   onmousemove=seashowtip(this.tips,1,150)   onmouseout=seashowtip(this.tips,0,150)>
      <input   type="submit"   name="Submit"   value="提交">
</form>
</body>
</html>

    protected void Page_Load(object sender, EventArgs e)
    {
        ok = txt.Text.ToString();

        lbl.Attributes.Add("onmouseout", "javascript:seashowtip('"+ok.ToString()+"',0,90)");
         lbl.Attributes.Add("onmousemove","javascript:seashowtip('"+ok.ToString()+"',1,150)");
    }

example

-------------------------------------------------------------------------

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script   language="JScript">
function   go(t,e){
mdiv.style.display="";
mdiv.innerHTML=t;
function   e.onmousemove(){
mdiv.style.pixelLeft=(document.body.clientWidth-event.clientX-10)>mdiv.offsetWidth?(event.clientX+100):(event.clientX-mdiv.offsetWidth+1000);
mdiv.style.pixelTop=(document.body.clientHeight-event.clientY-10)>mdiv.offsetHeight?(event.clientY+10):(event.clientY-mdiv.offsetHeight);
}
function   e.onmouseout(){
mdiv.style.display="none";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label runat="server" ID="lbl" ForeColor="red" />
    <a   onmouseover="go('textasdfasdf',this)"href="#">asdfasdfasdf</a>   _fcksavedurl=""#">asdfasdfasdf</a>  "
<div   style=position:absolute;display:none   id="mdiv"></div>
    </div>
    </form>
</body>
</html>