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

最新推荐文章于 2022-10-25 10:13:37 发布

jackeyabc

最新推荐文章于 2022-10-25 10:13:37 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：框架 javascript function input server xhtml

本文链接：https://blog.youkuaiyun.com/jackeyabc/article/details/1964894

本文介绍了一种使用JavaScript和HTML实现鼠标悬停提示的方法。通过自定义函数seashowtip，可以根据鼠标位置显示带有提示信息的浮动窗口。适用于网页表单元素如用户名、密码等字段的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>