鼠标划过图片title 提示实现

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>图片提示</title>
  6.  <!--   引入jQuery -->
  7.  <script src="../../scripts/jquery.js" type="text/javascript"></script>
  8. <style type="text/css">
  9. body{
  10.     margin:0;
  11.     padding:40px;
  12.     background:#fff;
  13.     font:80% Arial, Helvetica, sans-serif;
  14.     color:#555;
  15.     line-height:180%;
  16. }
  17. img{border:none;}
  18. ul,li{
  19.     margin:0;
  20.     padding:0;
  21. }
  22. li{
  23.     list-style:none;
  24.     float:left;
  25.     display:inline;
  26.     margin-right:10px;
  27.     border:1px solid #AAAAAA;
  28. }
  29.  
  30. /* tooltip */
  31. #tooltip{
  32.     position:absolute;
  33.     border:1px solid #ccc;
  34.     background:#333;
  35.     padding:2px;
  36.     display:none;
  37.     color:#fff;
  38. }
  39. </style>
  40. <script type="text/javascript">
  41. //<![CDATA[
  42. $(function(){
  43.     var x = 10;
  44.     var y = 20;
  45.     $("a.tooltip").mouseover(function(e){
  46.         this.myTitle = this.title;
  47.         this.title = "";
  48.         var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
  49.         var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
  50.         $("body").append(tooltip);    //把它追加到文档中
  51.         $("#tooltip")
  52.             .css({
  53.                 "top": (e.pageY+y) + "px",
  54.                 "left":  (e.pageX+x)  + "px"
  55.             }).show("fast");      //设置x坐标和y坐标，并且显示
  56.     }).mouseout(function(){
  57.         this.title = this.myTitle;
  58.         $("#tooltip").remove();     //移除
  59.     }).mousemove(function(e){
  60.         $("#tooltip")
  61.             .css({
  62.                 "top": (e.pageY+y) + "px",
  63.                 "left":  (e.pageX+x)  + "px"
  64.             });
  65.     });
  66. })
  67. //]]>
  68. </script>
  69.  
  70. </head>
  71. <body>
  72. <h3>有效果：</h3>
  73.     <ul>
  74.         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
  75.         <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>
  76.         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
  77.         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
  78.     </ul>
    </body>
    </html>

鼠标划过图片title 提示实现的更多相关文章

  1. CSS3 鼠标划上图片放大

    td img{transition: all 1s}/*鼠标划上,图片1s全部显示完成*/ td img:hover{ transform: scale(5) translateX(50%) tran ...

  2. JavaScript函数实现鼠标指向后带图片的提示效果

    转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...

  3. easyui toopTip，鼠标划过悬浮，显示一个小提示框的方法

    easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...

  4. 关闭myeclipse中烦人的鼠标划过,自动提示功能

    eclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!! 都知道,使用myeclips ...

  5. JavaScript总结之鼠标划过弹出div单击出现对话框

    为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...

  6. 黑马day18 鼠标事件&amp;图片变大

    有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大.然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这样的效果: 这是图片文件夹: < ...

  7. jQuery实现鼠标划过展示大图的方法

    这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现鼠标划过展示大图 ...

  8. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  9. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. WebBrowser控件默认使用IE9,IE10的方法

    1,打开注册表 HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)     SOFTWARE        Microsoft           Internet E ...

  2. HDOJ 1715 大菲波数

    Problem Description Fibonacci数列,定义如下: f(1)=f(2)=1 f(n)=f(n-1)+f(n-2) n>=3. 计算第n项Fibonacci数值. Inpu ...

  3. Android程序的入口点和全局变量设置--application

    首先看看 application的官方文档 我之前一直以为Android程序的入口点就是带MAIN和LAUNCHER的Activity的onCreate方法,看来我是错了~  原来真正的入口点是 Ap ...

  4. errno与perror

    很多系统函数在错误返回时将错误原因记录在libc定义的全局变量errno中,每种错误原因对应一个错误码,请查阅errno(3)的Man Page了解各种错误码,errno在头文件errno.h中声明, ...

  5. hive 模块

  6. call, apply的用法意义以及区别是什么

    call和apply没有什么大的区别,两者的作用都是:改变对象的this指向的内容. 他们的写法不同,如下: func.call(func1, var1, var2, var3); func.appl ...

  7. 4th day

    老师讲的好快啊... /* 建一个innodb类型且字符集为utf8的表,其中包括以下类型的字段:int(自增长),float,char,varchar,datetime,date,text,enum ...

  8. android string.xml里的空格字符

    在string.xml定义字符串的时候常常要用到空格, 直接用键盘敲的话不知道是几个空格,常常看错了,导致误删. 假设用 来替代空格的话,就好非常多. 另外使用%1$s,%1$d能够在一个字符串里定义 ...

  9. [转] Python list、tuple、dict区别

    from: http://www.cnblogs.com/Michael-Kong/archive/2012/07/11/2585840.html Dictionary 是 Python 的内置数据类 ...

  10. fluentd结合kibana、elasticsearch实时搜索分析hadoop集群日志<转>

    转自 http://blog.csdn.net/jiedushi/article/details/12003171 Fluentd是一个开源收集事件和日志系统,它目前提供150+扩展插件让你存储大数据 ...