图片提示:

效果如下:

 <!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. 获取某几个分类下的前N条数据 mssql语句

    方案1: (SELECT top 10 *  FROM 表 where type=3  ) UNION ALL   (SELECT top 10 *  FROM 表 where type=4  )  ...

  2. javascript js 内存泄露

    JavaScript 内存泄露 1.什么是闭包.以及闭包所涉及的作用域链这里就不说了. 2.JavaScript垃圾回收机制 JavaScript不需要手动地释放内存,它使用一种自动垃圾回收机制(ga ...

  3. winform 发布应用程序 提示 “未能注册模块（程序路径）\ieframe.dll”

    程序安装的时候出现未能注册模块(程序路径)\ieframe.dll提示 这种情况的出现,是因为引用的shdocvw.dll,目前发现了一个折中的解决方法,在安装程序里面,可以看到ieframe.dll ...

  4. JPA一对多和多对一关系

    1-m:多的一方为关系维护端,关系维护端负责外键纪录的更新,关系被维护端没有权力更新外键纪录. 维护端注解 @OneToMany(cascade = { CascadeType.PERSIST, Ca ...

  5. 有关获取session属性时报nullPointException（空指针异常）的解决方案

    一般我们在从session中获取数据时,需要先进行赋值,也就是必须先进行session.setAttribute(String,Object)方法进行赋值,然后我们才能从session中获取内容,但是 ...

  6. 【转】Android开发实践：自定义带消息循环（Looper）的工作线程

    http://ticktick.blog.51cto.com/823160/1565272 上一篇文章提到了Android系统的UI线程是一种带消息循环(Looper)机制的线程,同时Android也 ...

  7. Orchard官方文档

    开始使用 安装Orchard 通过Orchard zip文件安装 使用WebMatrix开发Orchard Dashboard总览 创建你的第一个Orchard站点 导航和菜单 添加博客 新增管理媒体 ...

  8. ubuntu12.04_64bit adb shell

    1.#adb shell 提示error: insufficient permissions for device 解决办法: 1)sudo gedit /etc/udev/rules.d/51-an ...

  9. linux 源码编译（转）

    源代码的用处无非是以下两点；1、软件根据用户的需要加以定制；2、二次开发；注：要根据软件的许可证书约定为准，开发者许可二次开发才行；1、源码包的打包格式；源代码一般以file.tar.gz file. ...

  10. Linq 学习

    聚合操作符                                                                                              说 ...