锋利的jquery-jQuery文字提示

最新推荐文章于 2021-09-15 11:43:51 发布

xchloading729

最新推荐文章于 2021-09-15 11:43:51 发布

阅读量820

点赞数 1

分类专栏： jquery javascript

本文链接：https://blog.csdn.net/wyxch/article/details/11834565

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

这段时间学习jquery 并练习锋利的jquery 其中将比较好代码进行整理（注以下代码均为锋利jquery 代码非本人编写）

现通过jquery 实现文字提示功能，而非html 自带title 属性的提示

要实现的功能描述：1.当鼠标移至元素时快速出现提示信息

2.当鼠标移出时提示信息消失

3.同一元素下，提示信息跟随鼠标移动

4.提示信息更加人性化

此例子中对：mouseover，mouseout，mousemove 等jquery事件属性进行了展示

其中e.pageY,e.pageX 设置为鼠标移动时文字显示位置的设置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>文字提示</title>
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<style type="text/css">
		body{
			margin:0;
			padding:40px;
			background:#fff;
			font:80% Arial, Helvetica, sans-serif;
			color:#555;
			line-height:180%;
		}
		p{
			clear:both;
			margin:0;
			padding:.5em 0;
		}
		/* tooltip */
		#tooltip{
			position:absolute;
			border:1px solid #333;
			background:#f7f5d1;
			padding:1px;
			color:#333;
			display:none;
		}
	</style>
	
	<script type="text/javascript">
	 $(document).ready(function(){
	 		var x=10;
	 		var y=20;
	 		$("a").mouseover(function(e){
	 			 this.myTitle = this.title;
	 			 this.title="";
	 			 var tooltip = "<div id='tooltip'>"+this.myTitle+"<\/div>"
	 			 $("body").append(tooltip);
	 			 $("#tooltip").css({
	 			 	 "top":(e.pageY+y)+ "px",
	 			 	 "left":(e.pageX+x)+ "px"
	 			 }).show("fast");


	 		}).mouseout(function(){
	 			this.title = this.myTitle;
	 			$("#tooltip").remove();

	 		}).mousemove(function(e){
	 			$("#tooltip").css({

	 				"top":(e.pageY+y) +"px",
	 				"left":(e.pageX+x)+ "px"
	 			});

	 		});

	 });

	</script>

</head>
<body>
	<p><a href="#"  title="这是我的超链接提示1.">提示1.</a></p>
	<p><a href="#"  title="这是我的超链接提示2.">提示2.</a></p>
	<p><a href="#"  title="这是自带提示1.">自带提示1.</a></p>
	<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
</body>
</html>