鼠标划过图片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. vijos P1243 生产产品（单调队列+DP）

      P1243生产产品   描述 在经过一段时间的经营后,dd_engi的OI商店不满足于从别的供货商那里购买产 品放上货架,而要开始自己生产产品了!产品的生产需要M个步骤,每一个步骤都可以在N台机器 ...

  2. AOJ 0525 穷举

    题意:有一个烤饼器可以烤r行c列的煎饼,煎饼可以正面朝上(用1表示)也可以背面朝上(用0表示).一次可将同一行或同一列的煎饼全部翻转.现在需要把尽可能多的煎饼翻成正面朝上,问最多能使多少煎饼正面朝上? ...

  3. hibernate生成查询语句但查不到数据

    hibernate能够生成查询语句 说明它已经进行了查询操作 返回结果数据记录为0  很可能出现的情况 是  :该查询未未访问到指定数据库表. 当使用的数据库为oracle数据库时,你会在bean配置 ...

  4. 通过js子页面回写父页面，改变父页面控件的值

    [原]js中实现子页面向父页面中赋值 (方法一) 父页面:<input  id="input1" type="text"/><a href=& ...

  5. 【转载】运维小技巧：使用ss命令代替 netstat

    转自:https://www.91ri.org/12470.html ss是Socket Statistics的缩写. 顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类 ...

  6. validate方法配置项

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

  7. ./filezilla: error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory

    opensuse系统 在filezilla官网下载压缩文件解压运行后报 ./filezilla: error while loading shared libraries: libpng12.so.0 ...

  8. Android项目实战--手机卫士20--拿到已经安装了的程序以及程序管理主界面

    好了,之前我们就讲了高级工具里面的短信备份与还原,那么我们高级工具里面的功能就基本上完成的啦,还有一个叫程序锁的功能而已,但我们今天先不做它先,我们先把我们的程序管理这个功能完成先. 先让大家看一下我 ...

  9. Linux下一个Redis启动/关闭/重新启动服务脚本

    脚本功能: 实现redis单机多实例情况下的正常启动.关闭.重新启动单个redis实例.完毕系统标准服务的下面经常使用功能:  start|stop|status|restart 注:redis程序代 ...

  10. spring mvc DispatcherServlet详解之前传---前端控制器架构

    前端控制器是整个MVC框架中最为核心的一块,它主要用来拦截符合要求的外部请求,并把请求分发到不同的控制器去处理,根据控制器处理后的结果,生成相应的响应发送到客户端.前端控制器既可以使用Filter实现 ...