<!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. 【有源汇上下界最大流】ZOJ 3229 Shoot the Bullet

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3229 题目大意: n天给m个女孩拍照(1<=n<= ...

  2. ASP.NET网站文件上传下载功能

    if (!IsPostBack) { if (Application["RaNum"] == null) { Random ra = new Random(); Applicati ...

  3. MFC UpdateData(true) 失败原因

    关于MFC  UpdateData的介绍SurpassLi博主在http://www.cnblogs.com/lidabo/archive/2012/07/17/2595464.html 已经介绍的很 ...

  4. QQ空间自动发广告解决方法

    最近空间好多人QQ都中了毒.每天我都有几十个好友刷空间话费.流量广告! QQ空间自动发广告的原因: 最近使用了刷赞或者其他QQ外挂软件(有些开发者或破解者会在这样的软件上留后门,请自己判断). 或者最 ...

  5. geopy使用详解

    由于专业需要,经常接触一些地理处理的工具包,文档都是英文的,自己看的同时将其翻译一下,一方面自己学习的同时有个记录,要是能同时给一起的学习的童鞋们一些帮助,想想也是极好的.以下的文档内容主要翻译自官方 ...

  6. JAVA工程师面试总结

    HR面: 你为什么要离职?如果是公司层面的,公司为什么要这么做? 你的理想薪资?你觉得你有什么优势胜任你应聘的工作? 你的未来发展规划? BOSS面: 项目的东西,hibernate调优?使用了什么数 ...

  7. P - The Shortest Path in Nya Graph-hdu4725（双端队列+拆点）

    题意:有N个点和N层..一层有X个点(0<=X<=N).两邻两层间有一条路花费C.还有M条小路在两个点之间.问从第一个点走到第N个点最短路是多少... 可以考虑在每一层增加一个点,这个点到 ...

  8. C++ 让 Win32 Console Application 程序后台运行

    方法一:(无闪现) 添加   #pragma comment( linker, "/subsystem:\"windows\" /entry:\"mainCRT ...

  9. Linux下得到显示屏参数的方法

    先安装一个软件,然后使用权ddcprobe可以查看当前支持的分辨率和刷新频率#sudo apt-get install xresprobe运行 #sudo ddcprobe会得到下面的信息vbe: V ...

  10. mysql中数据库database、实例instance、会话session的关系

    1. No suitable driver found for http://127.0.0.1:3306/test jdbc_url错误,jdbc走自己的协议. 正确的路径应该是:jdbc:mysq ...