1.文字提示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>文字提示</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 p{ 18 clear:both; 19 margin:0; 20 padding:.5em 0; 21 } 22 /* tooltip */ 23 #tooltip{ 24 position:absolute; 25 border:1px solid #333; 26 background:#f7f5d1; 27 padding:1px; 28 color:#333; 29 width:300px; 30 display:none; 31 } 32 </style> 33 <script type="text/javascript"> 34 $(function(){ 35 //将自带的提示，替换成 自定义提示 36 37 $(".mytooltip").mouseover(function(event){ 38 39 //1 获得绑定的数据 40 var title = $(this).data("mytitle"); 41 if(! title){ //没有 42 //获得自带提示 43 title = $(this).attr("title"); 44 //将自带提示删除 45 $(this).removeAttr("title"); 46 //绑定数据 47 $(this).data("mytitle",title) 48 } 49 50 //2 创建div 51 var $new = $("<div id='tooltip'></div>"); 52 //3设置提示 53 $new.html(title); 54 55 //4定位 56 $new.offset({"left":event.pageX + 5,"top":event.pageY - 20}); 57 58 //5追加到body，并显示 59 $new.appendTo("body").show(); 60 }).mouseout(function(){ 61 //删除 62 $("#tooltip").remove(); 63 }).mousemove(function(event){ 64 // 重写定位 65 $("#tooltip").offset({"left":event.pageX + 5,"top":event.pageY - 20}); 66 }); 67 68 }); 69 70 </script> 71 </head> 72 <body> 73 <p><a href="#" class="mytooltip" title="这是我的超链接提示1.">提示1.</a></p> 74 <p><a href="#" class="mytooltip" title="这是我的超链接提示2.">提示2.</a></p> 75 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> 76 <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p> 77 78 </body> 79 </html>
2.图片提示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片提示</title> 6 <!-- 引入jQuery --> 7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 img{border:none;} 18 ul,li{ 19 margin:0; 20 padding:0; 21 } 22 li{ 23 list-style:none; 24 float:left; 25 display:inline; 26 margin-right:10px; 27 border:1px solid #AAAAAA; 28 } 29 30 /* tooltip */ 31 #tooltip{ 32 position:absolute; 33 border:1px solid #ccc; 34 background:#333; 35 padding:2px; 36 display:none; 37 color:#fff; 38 } 39 </style> 40 <script type="text/javascript"> 41 $(function(){ 42 var x = 10; 43 var y = 20; 44 var href; 45 46 $("a[class=tooltip]").mouseover(function(e){ 47 //1 获取对应标签的自带提示 48 //var title = $("a[class=tooltip]").attr("title"); 49 //this代表的是DOM对象(页面中的元素) 50 href = this.href; 51 52 //删除自带提示 53 this.href = ""; 54 55 //2 创建标签用于自定义提示 56 var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>"); 57 58 //3 将自定义提示的标签，添加到body标签下 59 $("body").append($div); 60 61 //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY) 62 $("#tooltip").css({ 63 "top" : e.pageY + y + "px", 64 "left" : e.pageX + x + "px" 65 }).show(1000); 66 67 }).mouseout(function(){ 68 this.href = href; 69 $("#tooltip").remove(); 70 }).mousemove(function(e){ 71 $("#tooltip").css({ 72 "top" : e.pageY + y + "px", 73 "left" : e.pageX + x + "px" 74 }); 75 }); 76 }); 77 </script> 78 79 </head> 80 <body> 81 <h3>有效果：</h3> 82 <ul> 83 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 84 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 85 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 86 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 87 </ul> 88 89 90 <br/><br/><br/><br/> 91 <br/><br/><br/><br/> 92 93 94 <h3>无效果：</h3> 95 <ul> 96 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 97 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 98 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 99 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 100 </ul> 101 </body> 102 </html>