首页 > 代码库 > jQuery实现文字放大效果
jQuery实现文字放大效果
实现效果：当鼠标移动到超链接的那一瞬间就出现提示。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字放大</title> 6 <link rel="stylesheet" href="css/default.css" type="text/css" /> 7 8 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script> 9 <style type="text/css">10 body{11 margin:0;12 padding:40px;13 background:#fff;14 font:80% Arial, Helvetica, sans-serif;15 color:#555;16 line-height:180%;17 }18 p{19 clear:both;20 margin:0;21 padding:.5em 0;22 }23 /* tooltip */24 #tooltip{25 position:absolute;26 border:1px solid #333;27 background:#f7f5d1;28 padding:1px;29 color:#333;30 display:none;31 }32 </style>33 <script type="text/javascript">34 $(document).ready(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>";41 $("body").append(tooltip);42 43 $("#tooltip").css({44 "top":(e.pageY+y)+"px",45 "left":(e.pageX+x)+"px"46 })47 .show("fast");48 }).mouseout(function(){49 this.title=this.myTitle;50 $("#tooltip").remove();51 }).mousemove(function(e){52 $("#tooltip")53 .css({54 "top": (e.pageY+y) + "px",55 "left": (e.pageX+x) + "px"56 });57 });58 });59 </script>60 </head>61 <body>62 <center>63 <h2>文字放大</h2>64 <p><a href="#" class="tooltip" title="这是超级链接提示1">提示1</a></p>65 <p><a href="#" class="tooltip" title="这是超级链接提示2">提示2</a></p>66 <p><a href="#" title="这是自动提示1">自动提示1</a></p>67 <p><a href="#" title="这是自动提示2">自动提示2</a></p>68 </center>69 </body>70 </html>
jQuery实现文字放大效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。