jQuery 学习笔记之九 (jQuery 图片提示 ) 

案例研究 网站的超链接和图片提示
 
1.超级链接提示效果
 浏览器已经自带了超级链接提示，只需要在超链接中加入title属性就可以了。
 HTML 代码如下:
 <a href="#" title="这是我的超链接提示1.">提示</a>
 然二这个提示效果的响应速度是非常缓慢的，考虑到良好的人机交互，需要的是鼠标移动到超级链接的那一瞬间出现提示，这时就需要移除<a>标签中的title提示效果，自己动手做一个类似功能
 的提示。
 首先在空白的页面上，添加两个普通超级链接和两个带有class的超级链接。
 <p><a href="#" class="tooltip" title="这是我的超级链接提示1">提示1.</a></p>
 <p><a href="#" class="tooltip" title="这是我的超级链接提示2">提示2</a></p>
 <p><a href="#" title="这是自带提示1">自带提示1</a></p>
 <p><a href="#" title="这是自带提示2">自带提示2</a></p>
 
 然后为class为tooltip的超链接添加mouseover和mouseout事件，jquery代码如下：
 $("a.tooltip").mouseover(function(){ 
   //显示
  }).mouseout(function(){ 
   //隐藏
  });

 实现这个效果的具体思路如下。
 (1)当鼠标滑入超链接。
   1创建一个<div>元素，<div>元素的内容title属性的值。
   2将创建的元素追加到文档中.
   3.为它设置x坐标和y坐标，使他显示在鼠标位置的旁边 。
 (2) 当鼠标滑出超级链接，移动<div>元素
  根据分析的思路，写出如下jQuery代码
  $(function(){ 
     $("a.tooltip").mouseover(function(e){  
        var tooltip="<div id='tooltip'> "+this.title+"</div>"; //创建<div>元素
        $("body").append(tooptip);
        $("#tooltip").css({
                          "top":e.page+"px",
                           "left":e.page+"px"
         }).show("fast");
   }).mouseout(function(){ 
      $("#tooltip").remove();//移动
    })
});
此时的效果有两个问题：首先是当鼠标滑过后，<a>标签中的title属性的提示也会出现；
其次是设置x坐标和y坐标的问题，由于自制的提示与鼠标的距离太近，有时候会引起无法提示的问题

(1)当鼠标滑入时，给对象添加一个新属性，并把title的值传给这个属性，然后清空属性title的值。
 this.mytitle=this.title;
 this.title="";
 var tooltip="<div id='tooltip'>"+this.Mytitle+"</div>";
 (2)当鼠标发出时，再把对象的mytile属性的值有赋给属性title
 jquery代码如下: 
   this.title=this.Mytitle;




<!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>文字提示</title>
 <!--   引入jQuery -->
 <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.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">
//<![CDATA[
$(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>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
</body>
</html>
posted @ 2011-03-22 14:57  jackyong  阅读(600)  评论(0)  编辑  收藏  举报