<!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="../../scripts/jquery-1.3.1.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{position:absolute;border:1px solid#ccc;background:#333;padding:2px;display:none;color:#fff;}

 </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 imgTitle = this.myTitle? "<br/>" + this.myTitle : "";

         var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/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>

 <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>

 </body>

 </html>

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

  1. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  2. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

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

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

  4. jQuery简单导航示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 用最简单的例子实现jQuery图片即时上传

    [http://www.cnblogs.com/Zjmainstay/archive/2012/08/09/jQuery_upload_image.html] 最近看了一些jQuery即时上传的插件, ...

  6. jQuery超链接提示，提示跟随鼠标动

    功能:实现鼠标移动到一个超链接时,鼠标右下角产生一个提示,并跟谁鼠标移动,知道鼠标离开超链接. 效果: 源码: <!--本案例是鼠标放在超链接上时,鼠标旁边有提示这是个超练级,以及放在图片上时图 ...

  7. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  8. 开发中可能会用到的几个 jQuery 小提示和技巧

    今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 HTML 的客户端脚本.网络中有大量 ...

  9. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

随机推荐

  1. C#控制台程序中处理2个关闭事件的代码实例

    我们开发的控制台应用,在运行阶段很有可能被用户Ctrl+C终止或是被用户直接关闭.如果我们不希望用户通过Ctrl+C终止我们的程序,就需要对Ctrl+C或关闭事件作处理. 处理方法 在.net平台下C ...

  2. PostgreSQL安装详细步骤（windows）

    原文地址:http://blog.chinaunix.net/uid-354915-id-3498734.html PostgreSQL安装:一.windows下安装过程安装介质:postgresql ...

  3. Jenkins 十二： 集成 selenium 测试

    我的selenium采用的是python版本. 其实 selenium java版本也类似. 1. 在jenkins里面新建selenium 测试项目. 源码管理采用 “Subversion”,输入 ...

  4. Solr多核的配置

    Solr 多核(MultiCore)配置 Solr Multicore意义 Solr Multicore 是 solr 1.3 的新特性.其目的一个solr实例,可以有多个搜索应用.< xmln ...

  5. ASP.NET中Get和Post的用法

    单form的提交有两种方式,一种是get的方法,一种是post 的方法.看下面代码,理解ASP.NET Get和Post两种提交的区别: < form id="form1"  ...

  6. 如何理解oracle 11g scan ip

    如何理解oracle 11g scan ip   在11.2之前,client链接数据库的时候要用vip,假如你的cluster有4个节点,那么客户端的tnsnames.ora中就对应有四个主机vip ...

  7. HDU1700：Points on Cycle

    Problem Description There is a cycle with its center on the origin. Now give you a point on the cycl ...

  8. Qt 属性

      Qt提供了一套和一些编译器提供商也提供的属性系统类似的完善的属性系统.然而,作为一个不依赖编译器和平台的库,Qt不能依赖像__property或者[property]那样的非标准编译器特征.我们的 ...

  9. WWDC心愿单:新版OS X或将有这些变化

    每年的WWDC开发者大会上苹果都会展示最新的软件研发成果,在新一代MacBook Pro和MacBook Air笔记本到来之前,我们不妨来期待下新版OS X会有怎样的变化. Siri入驻Mac   此 ...

  10. ios创建的sqlite数据库文件如何从ios模拟器中导出

    为了验证数据库的结构,有的时候需要使用一些管理工具来直接查看sqlite数据库的内容,在windows下有sqlite3的专用工具下载,而在ios下也可以使用火狐浏览器的插件sqlitemanager ...