实现效果：当鼠标移动到超链接的那一瞬间就出现提示。

　　　　

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>文字放大</title>

 <link rel="stylesheet" href="css/default.css" type="text/css" />

 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script>

 <style type="text/css">

     body{

         margin:0;

         padding:40px;

         background:#fff;

         font:80% Arial, Helvetica, sans-serif;

         color:#555;

         line-height:180%;

     }

     p{

         clear:both;

         margin:0;

         padding:.5em 0;

     }

     /* tooltip */

     #tooltip{

         position:absolute;

         border:1px solid #333;

         background:#f7f5d1;

         padding:1px;

         color:#333;

         display:none;

     }

 </style>

 <script type="text/javascript">

     $(document).ready(function(){

         var x =10;

         var y =20;

         $("a.tooltip").mouseover(function(e){

               this.myTitle = this.title;

               this.title="";

             var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";

             $("body").append(tooltip);

             $("#tooltip").css({

                             "top":(e.pageY+y)+"px",

                             "left":(e.pageX+x)+"px"

                             })

                         .show("fast");

         }).mouseout(function(){

             this.title=this.myTitle;

             $("#tooltip").remove();

         }).mousemove(function(e){

             $("#tooltip")

                 .css({

                     "top": (e.pageY+y) + "px",

                     "left": (e.pageX+x)  + "px"

                 });

         });

     });

 </script>

 </head>

 <body>

     <center>

         <h2>文字放大</h2>

         <p><a href="#" class="tooltip" title="这是超级链接提示1">提示1</a></p>

         <p><a href="#" class="tooltip" title="这是超级链接提示2">提示2</a></p>

         <p><a href="#" title="这是自动提示1">自动提示1</a></p>

         <p><a href="#" title="这是自动提示2">自动提示2</a></p>

     </center>

 </body>

 </html>

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

  1. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

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

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  3. jQuery实现网站图片放大效果

    实现效果:当鼠标指向商品图片时,图片会自动放大. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  4. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  5. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  7. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  8. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  9. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. supervisor很赞！

    最近,公司进行了新的架构设计,原来一个区服一组进程,变成了对外只有一台服,后面N组多进程进行服务的模式.于是,管理进程就变成了一个头痛的问题.原来是在写代码的目录里放置各种脚本解决的,关闭脚本,开启脚 ...

  2. php 在客户端生成txt文件并且下载

    在访问php时生成txt文件 $filename = 'file.text'; //也可以是其他后缀格式的 $ua = $_SERVER["HTTP_USER_AGENT"]; f ...

  3. Sublime Text 2 安装主题的方法

    主题下载 下载一个主题,例如: https://github.com/hyspace/st2-reeder-theme 里面起作用的文件有两个: Reeder.sublime-theme Earths ...

  4. 使用容器控制器控制另外两个控制器的view交换

    建三个UIViewController 的子控制器,其中一个为根控制器,另外两个控制器的视图作为切换对象 AppDelegate中代码 //AppDelegate.h中代码 #import <U ...

  5. char类型与Unicode的编码

    Java的char型是非常独特的,占用两个字节,因为Java中char型采用了Unicode编码. 要理解这个问题,我们必须要理解什么是Unicode. 世界上存在着多种编码方式,同一个二进制数字可以 ...

  6. Java 抓取网页内容

    前两天想写一段自动提取微博状态的代码.据我所知,实现这个功能即可以用PHP写,也可以用Java写.我认为用Java写调试方便一点,PHP的脚本还要上传到服务器什么的. 代码很简单的,新建一个java. ...

  7. CSS3 transform的skew属性值图文详解

    我刚刚接触transform的skew属性值时一头雾水,根本不知道种东西到底是咋变的.上网查,各个网站上也只说这个使用来做扭曲变换的,具体是咋变的就是不说....无奈我只好自己研究了,现把研究结果共享 ...

  8. web标准的可用性和可访问性

    在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成 ...

  9. python--列表生成式--8

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 一.生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我 ...

  10. HDU-1828 Picture（扫描线）

    题目大意:给若干个矩形,求轮廓边长. 题目分析:与求面积类似.按从下往上扫描,仍然是底边添加,上边删除.但要同时维护竖边的数目,每次扫描对答案的贡献为扫描线上总覆盖长度的变化量加上竖边的增量.总覆盖长 ...