html标签title属性效果优化

html标签title属性效果不友好，最致命的是响应慢，体验不好，JQuery-UI提供了很好的支持。在jquery.tip的基础上又做了修改，这样子定制效果更强。

代码如下：

<!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>jQuery实现的简单文字提示效果</title>

	<!--   无需引用jQuery，下面的js已经自带了简化的jquery代码 -->

	<script src="jquery.tip.js" type="text/javascript"></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">

		$(function () {

			var x = 10;

			var y = 20;

			$("a.tooltip").mouseover(function (e) {

				this.myTitle = this.title;

				this.title = "";

				var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>"; //创建 div 元素 文字提示

				$("body").append(tooltip);	//把它追加到文档中

				$("#tooltip").css({

					"top": (e.pageY + y) + "px",

					"left": (e.pageX + x) + "px"

				}).show("fast");	  //设置x坐标和y坐标，并且显示

			}).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>

	<h1 align="center">jQuery实现的简单文字提示效果</h1>

	<h2 align="center">请将鼠标指向超链接文字</h2>

	<p>

		<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提示1.">jQuery提示1</a>

	</p>

	<p>

		<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提提示2.">jQuery提示2</a>

	</p>

</body>

</html>

转载地址：http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html

巴特西

html标签title属性效果优化

最新文章

热门文章