锋利的jquery-jQuery文字提示

       这段时间学习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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值