图片提示:

效果如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>图片提示</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <style type="text/css">
 body{
     margin:0;
     padding:40px;
     background:#fff;
     font:80% Arial, Helvetica, sans-serif;
     color:#555;
     line-height:180%;
 }
 img{border:none;}
 ul,li{
     margin:0;
     padding:0;
 }
 li{
     list-style:none;
     float:left;
     display:inline;
     margin-right:10px;
     border:1px solid #AAAAAA;
 }

 /* tooltip */
 #tooltip{
     position:absolute;
     border:1px solid #ccc;
     background:#333;
     padding:2px;
     display:none;
     color:#fff;
 }
 </style>
 <script type="text/javascript">
         $(document).ready(function(){
             var x = 10;
             var y = 20;

             $("a[class=tooltip]").mouseover(function(e){
                 //1 获取对应a标签的href属性
                 var myHref = this.href;

                 //2 创建标签进行图片提示
                 var $div = $("<div id='tooltip'><img src='"+myHref+"'></img></div>");

                 //3 添加到页面中(body标签下)
                 $("body").append($div);

                 //4 调整一下位置(相对鼠标的坐标值)
                 $("#tooltip").css({
                     top : e.pageY + y + "px",
                     left : e.pageX + x + "px"
                 }).show();

             }).mouseout(function(){
                 $("#tooltip").remove();
             }).mousemove(function(e){
                 $("#tooltip").css({
                     top : e.pageY + y + "px",
                     left : e.pageX + x + "px"
                 })
             });
         });
 </script>

 </head>
 <body>
 <h3>有效果：</h3>
     <ul>
         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
         <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
     </ul>

 <br/><br/><br/><br/>
 <br/><br/><br/><br/>

 <h3>无效果：</h3>
 <ul>
         <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
         <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
         <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
         <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
     </ul>
 <!-- Resources from http://down.liehuo.net -->
 </body>
 </html>

文字提示:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>文字提示</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.4.2.js" type="text/javascript"></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">
 //<![CDATA[
 $(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>"; //创建 div 元素
         $("body").append(tooltip);    //把它追加到文档中
         $("#tooltip")
             .css({
                 "top": (e.pageY+y) + "px",
                 "left": (e.pageX+x)  + "px"
             }).show("fast");      //设置x坐标和y坐标，并且显示
     }).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>
 <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>
 <!-- Resources from http://down.liehuo.net -->
 </body>
 </html>

jQuery图片提示和文字提示的更多相关文章

  1. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

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

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  4. jQuery简单纯文字提示条

    如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...

  5. jQuery渐隐渐出的文字提示

    <html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...

  6. iOS开发（3）：tips提示 | 如何提示一行文字或一个图片

    我有一个需求:在点击或长按某个按钮时,显示提示,包括简单的文字提示,还有复杂一点的图片甚至是动态图的提示(可能还要加上文字),怎么实现呢? (1)文字tips 使用之前介绍的qmuikit里面的QMU ...

  7. jQuery 闪动的文字提示

    原文地址:http://www.cnblogs.com/kiter/archive/2013/02/22/2922242.html 声明,本文转自网络. jQuery 闪动的文字提示,仿QQ头像闪烁闪 ...

  8. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  9. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

随机推荐

  1. Windows x86 x64使用SetThreadContext注入shellcode的方式加载DLL

    一.前言 注入DLL的方式有很多,在R3就有远程线程CreateRemoteThread.SetWindowsHookEx.QueueUserApc.SetThreadContext 在R0可以使用a ...

  2. php写扩展

    用PHP扩展做一个HelloWorld! PHP 尽管提供了大量有用的函数,但是在特殊情况下还可能需要进行扩展编程,比如大量的 PECL(PHP Extension Community Library ...

  3. jQuery生成全页面的悬浮覆盖层效果（overlay）

    可能在大家开发的过程中,往往需要自己生成一个全页面的覆盖层,以便让用户能够把注意力专注于开发者指定的某一个区域,在这里开发小技巧里,我们使用非常简单的代码生成类似的效果,如下: $("#ov ...

  4. 六、Linux/UNIX操作命令积累【kill、netstat、df、du】

    在使用Linux/UNIX下,常常会使用文本界面去设置系统或操作系统,作者本人在工作的过程也在不断接触这方面的命令,所以为此特酝酿.准备.開始了本文的编写. 本文主要记录自己平时遇到的一些Linux/ ...

  5. javascript计算字符串的字节长度

    String.prototype.byteLen = function(){ var len = 0, i = this.length; while(i--) { len += (this.charC ...

  6. ORCALE用户授权与创建同义词

    创建同义词: DROP public synonym marketmonitor_day; DROP public synonym marketmonitor_month; DROP public s ...

  7. codeforces Gym 100187L L. Ministry of Truth 水题

    L. Ministry of Truth Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/p ...

  8. iOS开发——开发必备OC篇&UITableView设置界面完整封装（一）

    UITableView设置界面完整封装(一) 简单MVC实现UITableView设置界面分组数据显示 一:模型 1:cell模型 /** 描述cell图片 */ @property (nonatom ...

  9. iOS开发——动画编程Swift篇&（五）CAKeyframeAnimation

    CAKeyframeAnimation //CAKeyframeAnimation-关键针动画 @IBAction func cakFly() { let animation = CAKeyframe ...

  10. python中的reduce(转)

    python中的reduce内建函数是一个二元操作函数,他用来将一个数据集合(链表,元组等)中的所有数据进行下列操作:用传给reduce中的函数 func()(必须是一个二元操作函数)先对集合中的第1 ...