jQuery实现文字放大效果
Posted noaman_wgs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现文字放大效果的主要内容，如果未能解决你的问题，请参考以下文章