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实现文字放大效果的主要内容,如果未能解决你的问题,请参考以下文章

css3 实现鼠标放上去图片外框不变大,里面中心放大

jquery实现图片放大效果

18款js和jquery文字特效代码分享

用jquery实现放大镜效果

jQuery实现点击图片简单放大效果

通过 jQuery 实现放大镜效果