<!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. Android从网络中获取xml文件并解析数据

    public class XmlwebData { @SuppressLint("UseValueOf") public static List<Person> get ...

  2. TCP 的那些事儿（下）

    这篇文章是下篇,所以如果你对TCP不熟悉的话,还请你先看看上篇<TCP的那些事儿(上)> 上篇中,我们介绍了TCP的协议头.状态机.数据重传中的东西.但是TCP要解决一个很大的事,那就是要 ...

  3. 423. Reconstruct Original Digits from English

    这个题做得突出一个蠢字.. 思路就是看unique letter,因为题里说肯定是valid string.. 一开始有几个Z就有几个ZERO 同样的还有x for six, g for eight, ...

  4. validate方法配置项

    validate()方法配置项 submitHandler 通过验证后运行的函数,可以加上表单提交的方法 invalidHandler 无效表单提交后运行的函数 ignore 对某些元素不进行验证 r ...

  5. Git push本地代码到新建远程仓库

    快速搞定  1.git init #初始化本地仓库 2.git remote add origin https://git.oschina.net/redArmy/springboot-swagger ...

  6. [C++] [算法] KMP算法

    KMP串匹配算法是一个经典的算法. 传统BF算法是传统的字符串匹配算法.很好理解.叶实现.但时间复杂度太高. 本文将从字符串模式字符串被称为.为了匹配字符串被称为主弦. KMP配时能够少移动从串的位置 ...

  7. Spring中的AOP

    什么是AOP? (以下内容来自百度百科) 面向切面编程(也叫面向方面编程):Aspect Oriented Programming(AOP),通过预编译方式和运行期动态代理实现程序功能的统一维护的一种 ...

  8. [转] Linux下查看文件和文件夹大小

    当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力.    du可以查看文件及文件夹的大小. ...

  9. HTTP in iOS你看我就够

    HTTP属于老话题了,在项目中我们经常需要往服务端发POST或者GET请求,但是对于HTTP的了解不应只局限于此.千里之行,始于足下.越想走的远,基本原理就应该了解的透彻全面一些,仅仅停留在使用ASI ...

  10. Android 发送验证码 简易代码

    效果 Activity ;//倒计时 private Timer timer; private Handler handler = new Handler() { public void handle ...