DOM操作在jQuery中的实用------文字提示和图片提示
浏览数：22 /
时间：2015年06月09日
关于文字提示想必是家喻户晓，操作呢说简单一点就是在超链接中加入title属性。但是在人机交互越来越倍受恩宠的年代，依靠浏览器自带的文字提示即title属性，提示效果的响应速度就（还是人艰不拆了吧~）so,要想有速度还是得靠自己一双手去写~
这个效果的思路如下：
A当鼠标滑入超链接：1创建一个<div>元素，<div>元素的内容为title属性的值
2将创建的元素追加到文档中
3为他设置横纵坐标，使他显示在鼠标位置的旁边
B当鼠标划出超链接时移除<div>元素
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>文字提示</title> 6 <script src="../../scripts/jquery.js" type="text/javascript"></script> 7 <style type="text/css"> 8 body{ 9 margin: 0; 10 padding: 40px; 11 background: #fff; 12 font: 100% Arial,Helvetica,sans-serif; 13 color: #555; 14 line-height: 180%; 15 } 16 p{ 17 clear: both; 18 margin: 0; 19 padding: 10px 0; 20 } 21 #tooltip{ 22 position: absolute; 23 border: 1px solid #333; 24 background: 1px; 25 padding: 1px; 26 color: #2cd6dc; 27 display: none; 28 29 } 30 </style> 31 <script type="text/javascript"> 32 $(function(){ 33 var x=10; 34 var y=20; 35 $("a.tooltip").mouseover(function(e){ 36 this.myTitle=this.title; 37 this.title=""; 38 var tooltip="<div id=‘tooltip‘>"+ this.myTitle+" <\/div>"; 39 $("body").append(tooltip); 40 $("#tooltip") 41 .css({ 42 "top":(e.pageY+y)+"px", 43 "left":(e.pageX+x)+"px" 44 45 }).show("fast"); 46 47 48 }).mouseout(function(){ 49 this.title=this.myTitle; 50 $("#tooltip").remove(); 51 }).mousemove(function(){ 52 $("#tooltip") 53 .css({ 54 "top":(e.pageY)+"px", 55 "left":(e.pageX)+"px" 56 }); 57 }); 58 59 60 61 62 }) 63 </script> 64 65 </head> 66 <body> 67 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> 68 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> 69 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> 70 <p><a href="#" title="这是自带提示2.">自带提示2.</a></p> 71 </body> 72 </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="../../scripts/jquery.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 //<![CDATA[ 42 $(function(){ 43 var x = 10; 44 var y = 20; 45 $("a.tooltip").mouseover(function(e){ 46 this.myTitle = this.title; 47 this.title = ""; 48 var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; 49 var tooltip = "<div id=‘tooltip‘><img src=‘"+ this.href +"‘ alt=‘产品预览图‘/>"+imgTitle+"<\/div>"; //创建 div 元素 50 $("body").append(tooltip); //把它追加到文档中 51 $("#tooltip") 52 .css({ 53 "top": (e.pageY+y) + "px", 54 "left": (e.pageX+x) + "px" 55 }).show("fast"); //设置x坐标和y坐标，并且显示 56 }).mouseout(function(){ 57 this.title = this.myTitle; 58 $("#tooltip").remove(); //移除 59 }).mousemove(function(e){ 60 $("#tooltip") 61 .css({ 62 "top": (e.pageY+y) + "px", 63 "left": (e.pageX+x) + "px" 64 }); 65 }); 66 }) 67 //]]> 68 </script> 69 70 </head> 71 <body> 72 <h3>有效果：</h3> 73 <ul> 74 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 75 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 76 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 77 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 78 </ul> 79 80 81 <br/><br/><br/><br/> 82 <br/><br/><br/><br/> 83 84 85 <h3>无效果：</h3> 86 <ul> 87 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 88 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 89 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 90 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 91 </ul> 92 </body> 93 </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
