图片提示:

效果如下:

 <!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用户、权限、角色管理

    Oracle 权限设置一.权限分类:系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限.(是针对表或视图而言的).   二.系统权 ...

  2. js获取当前页面的url信息方法

    例如网址:http://localhost:12085/My/OrderM.aspx 设置或获取对象指定的文件名或路径. alert(window.location.pathname) 输出结果:/M ...

  3. 编译cscope-15.8a遇到的问题与解决方案

    1)环境 主机:Linux ubuntu 3.2.0-32-generic-pae #51-Ubuntu SMP Wed Sep 26 21:54:23 UTC 2012 i686 i686 i386 ...

  4. linux下mysql开启慢查询

    mysql中最影响速度的就是那些查询很慢的语句.这些慢的语句,可能是写的不够合理或者是大数据下多表的联合查询等等.所以我们要找出这些语句,分析原因,加以优化. 1.方法1:用命令开启慢查询 1).查看 ...

  5. 从零开始学android开发-项目重命名

    --修改项目名称 选中项目-[refactor]-[rename] --修改package名称 选中需要重命名的包-[refactor]-[rename] --修改gen下面的名称 打开Android ...

  6. Windows平台下libevent库的使用

    1     引子 手头上有一个使用了4个年头的HttpClient库,自己封装的,对于集成了IE浏览器的应用程序很友好.但最近想把产品扩展到Chrome和FireFox阵营,萌发了重构HttpClie ...

  7. Android自定义长按事件

    Android系统自带了长按事件,setOnLongClickListener即可监听.但是有时候,你不希望用系统的长按事件,比如当希望长按的时间更长一点的时候.这时候就需要自己来定义这个长按事件了. ...

  8. js中日期转换为时间戳

    function dateToTimestamp(date) { //方法一 var newDate = new Date(); newDate.setFullYear(date.substring( ...

  9. 在C++中使用golang的协程

    开源项目cpp_features提供了一个仿golang协程的stackful协程库. 可以在c++中使用golang的协程,大概语法是这样的: #include <iostream> v ...

  10. 深入解析ext2文件系统之mke2fs

      上一遍博文的重点其实将ext2整体的组织框架,我们知道了ext2文件系统由块组组成,每个块组里面的组织形式.我们甚至直接把超级块和组描述符里面的内容,用十六进制形式展现了出来.这篇博文主要讲述如何 ...