图片提示:
效果如下:
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.4.2.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 $(document).ready(function(){ 42 var x = 10; 43 var y = 20; 44 45 $("a[class=tooltip]").mouseover(function(e){ 46 //1 获取对应a标签的href属性 47 var myHref = this.href; 48 49 //2 创建标签进行图片提示 50 var $div = $("<div id='tooltip'><img src='"+myHref+"'></img></div>"); 51 52 //3 添加到页面中(body标签下) 53 $("body").append($div); 54 55 //4 调整一下位置(相对鼠标的坐标值) 56 $("#tooltip").css({ 57 top : e.pageY + y + "px", 58 left : e.pageX + x + "px" 59 }).show(); 60 61 }).mouseout(function(){ 62 $("#tooltip").remove(); 63 }).mousemove(function(e){ 64 $("#tooltip").css({ 65 top : e.pageY + y + "px", 66 left : e.pageX + x + "px" 67 }) 68 }); 69 }); 70 </script> 71 72 </head> 73 <body> 74 <h3>有效果：</h3> 75 <ul> 76 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 77 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 78 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 79 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 80 </ul> 81 82 83 <br/><br/><br/><br/> 84 <br/><br/><br/><br/> 85 86 87 <h3>无效果：</h3> 88 <ul> 89 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 90 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 91 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 92 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 93 </ul> 94 <!-- Resources from http://down.liehuo.net --> 95 </body> 96 </html>
文字提示:
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.4.2.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 display:none; 30 } 31 </style> 32 <script type="text/javascript"> 33 //<![CDATA[ 34 $(function(){ 35 var x = 10; 36 var y = 20; 37 $("a.tooltip").mouseover(function(e){ 38 this.myTitle = this.title; 39 this.title = ""; 40 var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素 41 $("body").append(tooltip); //把它追加到文档中 42 $("#tooltip") 43 .css({ 44 "top": (e.pageY+y) + "px", 45 "left": (e.pageX+x) + "px" 46 }).show("fast"); //设置x坐标和y坐标，并且显示 47 }).mouseout(function(){ 48 this.title = this.myTitle; 49 $("#tooltip").remove(); //移除 50 }).mousemove(function(e){ 51 $("#tooltip") 52 .css({ 53 "top": (e.pageY+y) + "px", 54 "left": (e.pageX+x) + "px" 55 }); 56 }); 57 }) 58 //]]> 59 </script> 60 </head> 61 <body> 62 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> 63 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> 64 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> 65 <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p> 66 <!-- Resources from http://down.liehuo.net --> 67 </body> 68 </html>
本文转自SummerChill博客园博客，原文链接：http://www.cnblogs.com/DreamDrive/p/5780207.html，如需转载请自行联系原作者
