图片提示:

效果如下:

 <!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. oracle：自定义多行合并聚合函数

    原始表 COUNTRY CITY            -------------------- -------------- 中国 台北              中国 香港             ...

  2. Javascript里，想把一个整数转换成字符串，字符串长度为2

    Javascript里,想把一个整数转换成字符串,字符串长度为2.  想把一个整数转换成字符串,字符串长度为2,怎么弄?比如 1 => "01"11 => " ...

  3. 关于div的居中的问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-01-11) div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性, ...

  4. springboot 学习笔记（一）

    引子 最近在搞一个项目,走在科技前沿的师兄, 摒弃了公司老套的框架模式, 采用了springboot搭建新应用.看到如此简洁的代码 , 深受诱惑.趁周末闲余之时, 背晒阳光, 学起了springboo ...

  5. javascrip keyCode属性备案

    keycode    8 = BackSpace BackSpacekeycode    9 = Tab Tabkeycode   12 = Clearkeycode   13 = Enterkeyc ...

  6. swift 3.0基本数据语法

    swift 3.0 字符串的介绍 OC和Swift中字符串的区别 在OC中字符串类型时NSString,在Swift中字符串类型是String OC中字符串@"",Swift中字符 ...

  7. iOS开发——多线程OC篇&多线程详解

    多线程详解 前面介绍了多线程的各种方式及其使用,这里补一点关于多线程的概念及相关技巧与使用,相信前面不懂的地方看了这里之后你就对多线程基本上没有什么问题了! 1——首先ios开发多线程中必须了解的概念 ...

  8. Linux文件空洞与稀疏文件 转

      1.Linux文件空洞与稀疏文件 2.文件系统数据存储 3.文件系统调试   文件空洞   在UNIX文件操作中,文件位移量可以大于文件的当前长度在这种情况下,对该文件的下一次写将延长该文件,并在 ...

  9. ios中@class和 #import，两种方式的讨论

    转自:http://blog.sina.com.cn/s/blog_a843a8850101b6a7.html 很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在 ...

  10. 一行命令搞定VS2012无法安装cocos2d-x-2.1.4及创建跨平台项目（二）

    转自:http://blog.csdn.net/yangjingui/article/details/9418843 由于上次发了一个比较二的方法来解决VS2012无法安装cocos2d-x-2.1. ...