漂亮的tip提示框

最新推荐文章于 2019-01-22 11:24:47 发布

lizhihui1987

最新推荐文章于 2019-01-22 11:24:47 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏：漂亮的tip提示框文章标签： xhtml javascript java ViewUI

本文链接：https://blog.youkuaiyun.com/lizhihui1987/article/details/84113621

漂亮的tip提示框专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript创建的漂亮提示框。当输入框获得焦点时，该提示框会显示，并给出如何正确填写表单字段的具体指导。通过jQuery简化了DOM操作，实现了平滑的淡入淡出效果。

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

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂亮的tip提示框</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
    var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
 	var pltsoffsetY = 12; // 弹出窗口位于鼠标下方的距离；3-12 合适
 	var pltsTitle="";
 	var content = "<div id='pltsTipLayer' align='center' style='padding-top:5px;";
 	content += "display: none;width: 400px;height: 25px;position: absolute;";
 	content += "background-color: #dff6c6;border: 1px solid #bdde98;color:#860404'>";
 	content += "请按\"姓/名 性别\"的形式填写，如\"FOX/MEGAN MS\"</div>";
 	document.write(content);

    function displayTip(){
    	$("#pltsTipLayer").fadeIn("slow");
        var MouseX=event.x;
        var MouseY=event.y;
        var popTopAdjust=0;
        var popLeftAdjust=0;
        var popHeight=pltsTipLayer.clientHeight;
        var popWidth=pltsTipLayer.clientWidth;
        
        if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth){
   			popLeftAdjust=-popWidth-pltsoffsetX*2;
  		}
  		else{
    		popLeftAdjust=0;
  		}
  		
		pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
		pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
    }
    
    function hideTip()
    {
    	$("#pltsTipLayer").fadeOut("slow");
    }
</script>	
</head>

<body>
<input type="text" onfocus="displayTip();" onblur="hideTip();"/>
</body>
</html>