jquery 鼠标旁边跟随提示框

最新推荐文章于 2020-07-06 13:16:37 发布
最新推荐文章于 2020-07-06 13:16:37 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyuxuan_java/article/details/8656665
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.9.1.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
 .toEmpty{
	background: #ff0000;
	}
 .inner{
 	color:#ff0000;
 }
 .followMouse{
 	 position: absolute;
  left: 0.5px;
  top: 0.5px;
  display:none;	
    border-style:solid;
  border-color:blue;

 }

</style>

</head>
<body>
	<s:form id="form1" action="authorAction_add" namespace="/author" >
	
		<s:textfield name="nameForm1" label="用户名"></s:textfield>
		<s:textfield name="emailForm1" label="邮件地址"></s:textfield>
		<s:fielderror id="password1error" name="password1error"></s:fielderror>
		<s:password id="password1" name="password1Form1" label="密码"></s:password>
		<s:password id="password2" name="password2Form1" label="确认密码"></s:password>
		<s:textfield name="fromForm1" label="来自"></s:textfield><%-- <s:select list=""></s:select> --%>
		<s:select name="sex" list="#{'男':'男','女':'女'}" headerKey="" headerValue="性别" lable="性别"></s:select>
		<%-- <s:select list="" label="职业" name="profession"></s:select>
		<s:select list="" label="行业" name="trade"></s:select>
		<s:select list="" label="工作年限" name="worktime"></s:select>
		<s:textfield name="" label="验证码"></s:textfield>
		<s:checkbox>我已经阅读并同意</s:checkbox> --%>
		<s:submit value="注册"></s:submit>
		<div id="log" class="followMouse"></div> 
		
	</s:form>
	<script type="text/javascript">

	
//TODO jquery：创建一个新的节点对象
		$("#form1").submit(function() {  
			var flag = true;
			
			var allInputs = $('input[name$="Form1"]');
			
			allInputs.each(function(){
				if($(this).val().length==0){
				flag = false;
				}
				if($(this).attr("name")=="password1Form1"){
					//TODO 判读是否submit
					if($(this).val().length<6){
						flag=false;
					}
				}
				if($(this).attr("name")=="password2Form1"){
					if($(this).val()!=$('input[name="password1Form1"]').val()){
						flag = false;
					}
				}
			});
			
			allInputs.each(function isEmpty(){
					if($(this).val().length ==0){
						$(this).addClass("toEmpty");
					}
					
				});
			allInputs.on('mouseenter',function(e){
				if($(this).val()==null || $(this).val().length==0){
				$("#log").css({display:"block",left:function(index,value){
					return e.pageX+2;
				},top:function(index,value){
					return e.pageY+2;
				}
				});
				$("#log").data("test","请输入信息");
				$("#log").text($("#log").data("test"));
			}
				else if($(this).attr("name")=="password1Form1"){
					var length = $(this).val().length;
					if(length<6){
						$("#log").css({display:"block",left:function(index,value){
							return e.pageX+2;
						},top:function(index,value){
							return e.pageY+2;
						}
						});
						$("#log").removeData("test");
						$("#log").data("test","最小长度为6,当前长度为"+length);
						$("#log").text($("#log").data("test"));
					}
					
				}
				else if($(this).attr("name")=="password2Form1"){
					if($(this).val()!=$('input[name="password1Form1"]').val()){
						$("#log").css({display:"block",left:function(index,value){
							return e.pageX+2;
						},top:function(index,value){
							return e.pageY+2;
						}
						});
						$("#log").removeData("test");
						$("#log").data("test","两次填写不一致,请重新填写");
						$("#log").text($("#log").data("test"));
					}
				}
			});
			allInputs.on("mouseleave",function(e){
				$("#log").css({display:"none"});
			});
			return flag;
		});


</script>
</body>
</html>



提交之后，如果输入框里面是空，但鼠标进入对话框中则会跟随鼠标提示"请输入信息",如果密码输入框不为空，而密码框1中字符少于6，则提示","最小长度为6,当前长度为"+length,如果密码框2中与密码框1中不等，则提示","两次填写不一致,请重新填写",档鼠标移出对话框，则提示消失。

效果参考iteye注册页面
 改进一

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.9.1.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
 .toEmpty{
	background: #ff0000;
	}
 .inner{
 	color:#ff0000;
 }
 .followMouse{
 	 position: absolute;
  left: 0.5px;
  top: 0.5px;
  display:none;	
    border-style:solid;
  border-color:blue;

 }

</style>

</head>
<body>
	<s:form id="form1" action="authorAction_add" namespace="/author" >
	
		<s:textfield id="nameForm1" name="name" label="用户名"></s:textfield>
		<s:textfield id="emailForm1" name="email" label="邮件地址"></s:textfield>
		<s:fielderror id="password1error" name="password1error"></s:fielderror>
		<s:password id="password1Form1" name="password" label="密码"></s:password>
		<s:password id="password2Form1" name="password2" label="确认密码"></s:password>
		<s:textfield name="from" label="来自"></s:textfield><s:select list="#{'北京':'北京','上海':'上海','广州':'广州','深圳':'深圳'}"></s:select>
		<s:select name="sex" list="#{'男':'男','女':'女'}" label="性别"></s:select>
		<s:select list="#{'CTO/CIO/技术总监':'CTO/CIO/技术总监','部门经理/部门主管':'部门经理/部门主管','部门经理/部门主管':'部门经理/部门主管'}" label="职业" name="profession"></s:select>
		<s:select list="#{'金融':'金融','电信':'电信','互联网':'互联网','物流':'物流'}" label="行业" name="trade">
		</s:select>
		<s:select list="#{'在读学生':'在读学生','应届毕业生':'应届毕业生','一年以上':'一年以上','两年以上':'两年以上'}" label="工作年限" name="worktime"></s:select>
		<s:textfield name="yanzheng" label="验证码"></s:textfield>
		<s:checkbox name="agree" label="我已经阅读并同意"></s:checkbox> 
		<s:submit value="注册"></s:submit>
		<div id="log" class="followMouse"></div> 
		
	</s:form>
	<script type="text/javascript">
	var clickSubmit = false;//是否点击提交
	var clickEmail = false;//是否点击email
	var haveEmail = false; //是否有此email
	var allInputs = $('input[id$="Form1"]');
	$('input[id="emailForm1"]').change(function(){
		clickEmail=true;
	$.get("author/authorAction_checkEmail",{email:$('input[id="emailForm1"]').val()},function(data){
		alert(data);
        	if(data=="true"){
        	
				$("#log").data("email","邮件地址已存在");
				haveEmail=true;
        	}
        	else if(data=="false"){
        		$("#log").removeData("email");
        		haveEmail= false;
        	}
        
        });
	});
    	$('input[id="emailForm1"]').on('mouseenter',function(e){
    		if(clickEmail && haveEmail){
    		$("#log").css({display:"block",left:function(index,value){
				return e.pageX+2;
			},top:function(index,value){
				return e.pageY+2;
			}
			});
			$("#log").text($("#log").data("email"));
    		}
    	});
    	$('input[id="emailForm1"]').on("mouseleave",function(e){
    		if(clickEmail){
    		$("#log").css({display:"none"});
    		}
    	});
//TODO jquery：创建一个新的节点对象
		$("#form1").submit(function() {  
			var flag = true;
			clickSubmit=true;
		
			
			allInputs.each(function(){
				if($(this).val().length==0){
				flag = false;
				}
			});
				if($(this).attr("id")=="password1Form1"){
					//TODO 判读是否submit
					if($(this).val().length<6){
						flag=false;
					}
				}
				if($(this).attr("id")=="password2Form1"){
					if($(this).val()!=$('input[id="password1Form1"]').val()){
						flag = false;
					}
				}
			if(haveEmail){
				flag = false;
			}
			
			alert(flag);
			return flag;
		});
		

	//红色class
	allInputs.on('blur',function(){
		if($(this).val().length ==0){
			$(this).addClass("toEmpty");
		}
	});
	
	//对话框提示
allInputs.on('mouseenter',function(e){
	if($(this).hasClass("toEmpty")){
	if($(this).val()==null || $(this).val().length==0){
	$("#log").css({display:"block",left:function(index,value){
		return e.pageX+2;
	},top:function(index,value){
		return e.pageY+2;
	}
	});
	$("#log").data("test","请输入信息");
	$("#log").text($("#log").data("test"));
}
	else if($(this).attr("id")=="password1Form1"){
		var length = $(this).val().length;
		if(length<6){
			$("#log").css({display:"block",left:function(index,value){
				return e.pageX+2;
			},top:function(index,value){
				return e.pageY+2;
			}
			});
			$("#log").data("password1","最小长度为6,当前长度为"+length);
			$("#log").text($("#log").data("password1"));
		}
		
	}
	else if($(this).attr("id")=="password2Form1"){
		if($(this).val()!=$('input[name="password1Form1"]').val()){
			$("#log").css({display:"block",left:function(index,value){
				return e.pageX+2;
			},top:function(index,value){
				return e.pageY+2;
			}
			});
			$("#log").data("password2","两次填写不一致,请重新填写");
			$("#log").text($("#log").data("password2"));
		}
}
	}
	});
allInputs.on("mouseleave",function(e){
	
	$("#log").css({display:"none"});
	
});
		

</script>
</body>
</html>


改进二

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.9.1.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
 .toEmpty{
	background: #ff0000;
	}
 .inner{
 	color:#ff0000;
 }
 .followMouse{
 	 position: absolute;
  left: 0.5px;
  top: 0.5px;
  display:none;	
    border-style:solid;
  border-color:blue;

 }

</style>

</head>
<body>
	<s:form id="form1" action="authorAction_add" namespace="/author" >
	
		<s:textfield id="nameForm1" name="name" label="用户名"></s:textfield>
		<s:textfield id="emailForm1" name="email" label="邮件地址"></s:textfield>
		<s:fielderror id="password1error" name="password1error"></s:fielderror>
		<s:password id="password1Form1" name="password" label="密码"></s:password>
		<s:password id="password2Form1" name="password2" label="确认密码"></s:password>
		<s:textfield name="from" label="来自"></s:textfield><s:select list="#{'北京':'北京','上海':'上海','广州':'广州','深圳':'深圳'}"></s:select>
		<s:select name="sex" list="#{'男':'男','女':'女'}" label="性别"></s:select>
		<s:select list="#{'CTO/CIO/技术总监':'CTO/CIO/技术总监','部门经理/部门主管':'部门经理/部门主管','部门经理/部门主管':'部门经理/部门主管'}" label="职业" name="profession"></s:select>
		<s:select list="#{'金融':'金融','电信':'电信','互联网':'互联网','物流':'物流'}" label="行业" name="trade">
		</s:select>
		<s:select list="#{'在读学生':'在读学生','应届毕业生':'应届毕业生','一年以上':'一年以上','两年以上':'两年以上'}" label="工作年限" name="worktime"></s:select>
		<s:textfield name="yanzheng" label="验证码"></s:textfield>
		<s:checkbox name="agree" label="我已经阅读并同意"></s:checkbox> 
		<s:submit value="注册"></s:submit>
		<div id="log" class="followMouse"></div> 
		
	</s:form>
	<script type="text/javascript">
	var clickSubmit = false;//是否点击提交
	var clickEmail = false;//是否点击email
	var haveEmail = false; //是否有此email
	var flag = true; //是否符合提交条件
	var allInputs = $('input[id$="Form1"]');
	$('input[id="emailForm1"]').change(function(){
		clickEmail=true;
	$.get("author/authorAction_checkEmail",{email:$('input[id="emailForm1"]').val()},function(data){
		alert(data);
        	if(data=="true"){
        	
				$("#log").data("email","邮件地址已存在");
				haveEmail=true;
        	}
        	else if(data=="false"){
        		$("#log").removeData("email");
        		haveEmail= false;
        	}
        
        });
	});
    	$('input[id="emailForm1"]').on('mouseenter',function(e){
    		if(clickEmail && haveEmail){
    		$("#log").css({display:"block",left:function(index,value){
				return e.pageX+2;
			},top:function(index,value){
				return e.pageY+2;
			}
			});
			$("#log").text($("#log").data("email"));
    		}
    	});
    	$('input[id="emailForm1"]').on("mouseleave",function(e){
    		if(clickEmail){
    		$("#log").css({display:"none"});
    		}
    	});
//TODO jquery：创建一个新的节点对象
		$("#form1").submit(function() {  
			
			clickSubmit=true;
		
			
			allInputs.each(function(){
				if($(this).val().length==0){
				flag = false;
				}
			});
				if($(this).attr("id")=="password1Form1"){
					//TODO 判读是否submit
					if($(this).val().length<6){
						flag=false;
					}
				}
				if($(this).attr("id")=="password2Form1"){
					if($(this).val()!=$('input[id="password1Form1"]').val()){
						flag = false;
					}
				}
			if(haveEmail){
				flag = false;
			}
			
			alert(flag);
			return flag;
		});
		

	
	//对话框提示
allInputs.on('mouseenter blur',function(e){
	if($(this).val()==null || $(this).val().length==0){
	$("#log").css({display:"block",left:function(index,value){
		return e.pageX+2;
	},top:function(index,value){
		return e.pageY+2;
	}
	});
	$("#log").data("test","请输入信息");
	$("#log").text($("#log").data("test"));
	flag = false;
	if(e.type=="blur"){
		$(this).addClass("toEmpty");
	}
}
	else if($(this).attr("id")=="password1Form1"){
		var length = $(this).val().length;
		if(length<6){
			$("#log").css({display:"block",left:function(index,value){
				return e.pageX+2;
			},top:function(index,value){
				return e.pageY+2;
			}
			});
			$("#log").data("password1","最小长度为6,当前长度为"+length);
			$("#log").text($("#log").data("password1"));
			flag = false;
			if(e.type=="blur"){
				$(this).addClass("toEmpty");
			}
		}
		
	}
	else if($(this).attr("id")=="password2Form1"){
		if($(this).val()!=$('input[name="password1Form1"]').val()){
			$("#log").css({display:"block",left:function(index,value){
				return e.pageX+2;
			},top:function(index,value){
				return e.pageY+2;
			}
			});
			$("#log").data("password2","两次填写不一致,请重新填写");
			$("#log").text($("#log").data("password2"));
			flag = false;
			if(e.type=="blur"){
				$(this).addClass("toEmpty");
			}
		}
}
	
	});
allInputs.on("mouseleave",function(e){
	
	$("#log").css({display:"none"});
	
});
		

</script>
</body>
</html>


 

参考jquery api

王奕然
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端实现鼠标跟随动画
09-27
内含五种前端实现鼠标跟随动画的实现代码，鼠标移动，页面显示动画效果，也可在此基础上自定义动画效果，亲测有效
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
10-22
主要介绍了jQuery实现鼠标跟随提示层效果代码,具备显示文本,Div,Table,Html等功能.涉及jQuery针对鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
JQuery实现一个简单的鼠标跟随提示效果
liudanyang_21的博客
07-06 358
效果体验：http://hovertree.com/texiao/jsstudy/2/实现思路　　1 鼠标移入标题（这里是<a>标签）　　　　创建一个div，div的内容为鼠标位置的文本　　　　将创建好的div加到文档中　　　　为提示层设置位置　　2 鼠标移出标题　　　　移除div　　3 当鼠标在标题内移动时　　　　同样添加div效果上面是跟随光标的，这个是居中的：http://hovertree.com/texiao/jsstudy/2/1.htm跟随光标完整代码如下： 1 <!DO
jquery鼠标跟随框~
weixin_30419799的博客
07-24 92
效果如下图：使用jquery做的。很简单几句代码就ok。 html代码： <div><a href="#" id="doc01">最终方案01.doc</a></div><div><a href="#" id="doc02">最终方案01.doc</a></div><div>&l...
实现跟随鼠标提示框
pj1653_9的博客
06-05 541
html部分 js部分 /* 事件类型： mouseover 让提示框显示 mouseout 让提示框隐藏 mousemove 让提示框跟随鼠标去移动 clientX clientY 原点位置：可视窗口的左上角为原点
[Jquery] 实现鼠标移到某个对象，在旁边显示层。
weixin_34075268的博客
12-10 102
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery悬浮提示框完整实例
10-22
主要介绍了jquery悬浮提示框实现方法,涉及jQuery鼠标事件响应及页面元素样式的动态操作技巧,需要的朋友可以参考下
jquery实现的鼠标悬停动态提示框效果.zip
最新发布
11-07
通过这些属性，我们可以确保提示框准确地跟随鼠标位置，并在鼠标离开时消失。 例如，创建一个隐藏的提示框元素，然后在鼠标悬停时显示： ```javascript var tooltip = $('动态提示信息</div>').hide(); $('...
jQuery Tooltip跟随鼠标提示条
07-09
jQuery Tooltip跟随鼠标提示条是一种常见的前端交互设计，用于在用户将鼠标悬停在特定元素上时，提供附加信息或指导。这种功能广泛应用于网站、应用和各种用户界面中，为用户提供方便的上下文帮助。 首先，jQuery是...
基于JQuery的一个简单的鼠标跟随提示效果
12-08
标题中的“基于JQuery的一个简单的鼠标跟随提示效果”是指利用JQuery库来创建一个功能，当用户将鼠标悬停在特定元素（例如本例中的`<a>`标签）上时，会在鼠标指针下方显示一个提示信息框，该信息框会随着鼠标在页面...
jquery提示框插件鼠标悬停显示提示信息
11-15
jquery提示框插件鼠标悬停显示提示信息，非常强大的一款提示信息插件 这是一款比较全面的提示框插件，包含弹出提示框，不同颜色和不同调用方法等。 效果详情可参考http://www.xwcms.net/js/tsk-fdc-dcc/66104.html
jquery实现input智能提示信息以及光标定位处选中特定的文字
weixin_34127717的博客
05-19 772
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动
热门推荐
dw_java08的专栏
08-09 1万+
这段代码经过演示，可以达到标题所说的效果，注意需要引入js文件   jquery鼠标经过淡入显示提示框 演示 .div{ border:1px solid #0000FF; float:left; width:200px; height:200px; margin:10px;} div#tip{ position:absolute; width:100px; heigh
jquery 鼠标悬停弹窗浮框 ， 提示框位置跟随鼠标移动
二娃的博客
06-08 3236
&lt;script language="javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt; &lt;script&gt; function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block&qu
jQuery tooltip提示框的演示，鼠标悬停显示信息
qq_39822451的博客
11-29 1871
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt;   &lt;meta charset="utf-8"&gt;   &lt;title&gt;jQuery UI Tooltip - Default functionality&lt;/title&gt;   &lt;link rel="stylesheet" href=
jquery简单的语法
10-15
主要是jQuery和css和html的简单语法的操作等等

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值