鼠标划过图片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. QTP自传之对象

    对象在手,测试我有 大家别误会,这里说的对象可不是值指男女朋友,而是对被测控件的识别.经过昨天的录制,大家一定很奇怪为什么我可以做到精确的回放操作,这都要归功于对象,下面就隆重的介绍我在对象识别方面的 ...

  2. guid转int

    如果你想生成一个数字序列,你将会获得一个19位长的序列. 下面的方法会把GUID转换为Int64的数字序列.  private static long GenerateIntID()  {       ...

  3. vtk 导出结果图片

    项目中需要将渲染结果导出为图片. (1)  一开始搜了vtk的方法,发现: http://blog.csdn.net/lbluekey/article/details/3346312 http://w ...

  4. 总结&计划

    最近完成的事儿: 1. 看完了<c专家编程>并且整理了读书笔记 2. 看了半章<大数据>发现这本书里面是纯纯的干货...习题需要认真做,算法需要仔细体会...不适合突击,尤其是 ...

  5. the identity used to sign the executable is no longer valid.解决方法

    the identity used to sign the executable is no longer valid.解决方法 一.重新下载Provisioning Profile 1.到devel ...

  6. 69个spring面试题及答案

    Spring 概述 1. 什么是spring? Spring 是个Java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring ...

  7. [AngularJS] Enable Animations Explicitly For A Performance Boost In AngularJS

    http://www.bennadel.com/blog/2935-enable-animations-explicitly-for-a-performance-boost-in-angularjs. ...

  8. PHP Predefined Interfaces 预定义接口(转)

    SPL提供了6个迭代器接口: Traversable 遍历接口(检测一个类是否可以使用 foreach 进行遍历的接口) Iterator 迭代器接口(可在内部迭代自己的外部迭代器或类的接口) Ite ...

  9. Windows与Linux文件共享

    Windows与Linux文件共享 Samba服务器 安装Samba服务器 rpm –ivh /mnt/Packages/Samba-3.5.10-125.el6.i686.rpm 添加用户并修改密码 ...

  10. Log4net 配置注意事项

    1. 首先引入Log4net程序集 2.修改webconfig配置文件 在 configuration 节点下面添加如下节点 <configSections> <section na ...