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>
时间: 2024-10-09 22:28:14

jQuery实现文字放大效果的相关文章

JQuery实现文本放大效果

html页面 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; } </style> <script src="jquery-1.11.1.js"></script> <sc

浅谈CSS和JQuery实现鼠标悬浮图片放大效果

对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3和HTML,Java的小伙伴不要绕道~~~ 言归正传,那么我们首先要完成什么样的图片处理呢? 一.CSS3图片的放大 css3中,有一个属性transform,官方的解释是:允许向元素应用2D或3D的转换.这些转换当然就包含旋转.缩放.移动或倾斜了.有兴趣的同学可以继续了解http://www.w3

jQuery实现的简单文字提示效果模拟title(转)

来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析: <!-- 引用jQuery --> <script src="jquery.js" type="text/javascript"></script> <style type="text/c

jQuery实现网站图片放大效果

实现效果:当鼠标指向商品图片时,图片会自动放大. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字放大</title> 6 7 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"><

jQuery酷炫的文字动画效果代码

jquery css3文字动画特效点击切换文字动态效果 jquery文字动画特效制作淡出淡进文字轮播动画效果代码 jquery文字提示点击按钮触发文字变大消失动画效果 jquery点击按钮淡出淡进动画增加积分数量效果 jquery文字跳舞鼠标滑过段落文字波浪线条跳动 jquery代码控制css background position属性设置文字背景图片动画 jquery文字动画插件制作文字flash动画滤镜效果切换特效

jquery实现文字上下滚动效果

文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css

JQuery实现文字无缝滚动效果 Marquee插件

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 官方演示,如下: Demo 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript&

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http

关于jQuery中实现放大镜效果

1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向大家介绍通过jQuery实现放大镜效果. 目录 实现原理 mousemove事件 相对坐标 background-position属性 mousewheel事件 1.1.2 正文 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位