鼠标划过图片title 提示实现

<!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.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">

//<![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>
</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. Delphi 总结操作Excel

    定义变量 Excelid:variant; 1.创建OLE对象 try Excelid:=CreateOleObject( 'Excel.Application' ); except on Excep ...

  2. 第一个ios程序

    1.ios的理解: Operating System,简称OS,操作系统,ios是苹果操作系统. 2.Xcode开发环境: 苹果公司开发的编程软件,是开发人员建立OS X 和 iOS 应用程序的最快捷 ...

  3. quartus中查看网表

    查看编译之后生成的逻辑结构 tools->Netlist Viewers->RTL vierer

  4. C++引用变量学习

    版权所有,转载请注明来源 (1)reference variable(rv) 主要用处是作为方程的形式参数,使用rv 可以直接对原数据进行操作而不是该数据的拷贝,节省了时间和空间,尤其是对于结构体以及 ...

  5. [Locked] One Edit Distance

    One Edit Distance Given two strings S and T, determine if they are both one edit distance apart. 分析: ...

  6. HDU 畅通工程系列

    畅通工程系列都是比较裸的最小生成树问题,且是中文题目,不赘述了. 1.HDU 1863 畅通工程 题意:一个省有很多村庄,其中一些之间是可以建公路的,每条公路都需要不同的代价,问代价最小的情况下将所有 ...

  7. 在pcDuino上刷了AndDroid,Ubuntu,XBMC

    一.Android.Ubuntu.XBMC播放高清视频得比较 1.Andrioid上播放1080P 无压力,硬件解码 2.Ubuntu上用Mplayer播放视频会很卡,可能是没有硬解的原因 3.Ubu ...

  8. Struts2学习笔记之s:select标签

    貌似Struts2 标签都快忘光了  今天先来一发struts2的select标签: 首先从简到难,静态赋值: 1 <s:select name="user.sex" lis ...

  9. jQuery Ajax 实例 具体介绍$.ajax、$.post、$.get的使用

    Jquery在异步提交方面封装的非常好.直接用AJAX非常麻烦须要处理浏览器之间的兼容问题,Jquery大大简化了我们的这些操作操作.不用在考虑浏览器这方面的问题,能够直接使用! $.post.$.g ...

  10. 把安卓源代码中的system app独立出来，像开发普通app那样开发

          个人建议首先依照android源码的ide/eclipse中的格式化xml和import导入到你编译的eclipse中,假设你编译的android源码是2.3以上的版本号的,建议用JDK6 ...