效果：http://keleyi.com/keleyi/phtml/image/8.htm

以下是完整代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.  <title>JQ实现鼠标经过显示大图效果-柯乐义</title>
  6.  <meta name="description" content="JQ实现鼠标经过显示大图效果 柯乐义" /><meta name="keywords" content="JQ实现鼠标经过显示大图效果 keleyi.com" />
  7.  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
  8.  <script type="text/javascript">
  9.  $(function () {
  10.  var x = 10;
  11.  var y = 20;
  12.  $("a.tooltip").mouseover(function (e) {
  13.  this.myTitle = this.title;
  14.  this.title = "";
  15.  var imgTitle = this.myTitle ? "<br />" + this.myTitle + " 产品预览图" : "";
  16.  var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='柯乐义产品' width='765' height='574' />" + imgTitle + "</div>";
  17.  $("body").append(tooltip);
  18.  $("#tooltip")
  19.  .css({
  20.  "top": (e.pageY + y) + "px",
  21.  "left": (e.pageX + x) + "px"
  22.  }).show("fast");
  23.  }).mouseout(function (e) {
  24.  this.title = this.myTitle;
  25.  $("#tooltip").remove();
  26.  }).mousemove(function (e) {
  27.  $("#tooltip").css({
  28.  "top": (e.pageY + y) + "px",
  29.  "left": (e.pageX + x) + "px"
  30.  });
  31.  });
  32.  })
  33.  </script>
  34.  <style>
  35.  ul{margin: 30px auto; width:1440px;}
  36.  ul li{float: left; padding-right: 20px; list-style: none;}
  37.  ul li img{width: 77px; height: 57px; padding: 6px; border: 1px solid #ccc; background-color:#eee; -webkit-border-radius: 8px;}
  38.  #tooltip{
  39.  position: absolute;
  40.  background-color: #eee;
  41.  border: 1px solid #999;
  42.  width: 765px;
  43.  height: 590px;
  44.  -webkit-border-radius: 8px;
  45.  font-family: "微软雅黑";
  46.  padding: 20px;
  47.  }
  48.  </style>
  49.  </head>
  50.  <body>
  51.  <div><a href="http://keleyi.com/a/bjac/h12vjfyv.htm" target="_blank">原文</a></div>
  52.  <div><ul>
  53.  <li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" title="柯乐义1" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" alt="柯乐义1" /></a></li>
  54.  <li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" title="柯乐义2" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" alt="柯乐义2" /></a></li>
  55.  <li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" title="柯乐义3" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" alt="柯乐义3" /></a></li>
  56.  <li><a href="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" title="柯乐义4" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" alt="柯乐义4" /></a></li>
  57.  </ul></div><div>柯乐义提醒您：把光标移动到图片上查看效果。</div>
  58.  </body>
  59.  </html>

代码中用到捕捉鼠标位置的功能，请参考http://keleyi.com/a/bjac/8p1g5yeq.htm

本文：http://www.cnblogs.com/jihua/p/bigimg.html

原文：http://keleyi.com/a/bjac/h12vjfyv.htm

jQuery鼠标经过显示大图的更多相关文章

  1. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...

  3. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  4. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  5. jQuery实现鼠标悬停显示提示信息窗口的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  7. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  8. EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

    EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...

  9. 基于jQuery鼠标滚轮滑动到页面节点部分

    基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

随机推荐

  1. Spring<bean>标签是反射来实现的

  2. highchart导出图片

    http://www.cnblogs.com/jasondan/p/3504120.html 项目中需求导出报表为图片存到Excel中去,或供其它页面调用. 开始存到截屏,但由于用户电脑分辨率不一样, ...

  3. ComboTree 的json格式和引用

    在easyui内,用 <select>实现combotree. <td ><select class="easyui-combotree" url=& ...

  4. 使用hexo搭建github.io博客(一)

    使用github.io可以搭建一个自己的博客,把静态文件项目托管到github上,可以写博客,可以使用markdown语法,也可以展示作品.灵活性高.但是有较大的难度. node,git版本变化日新月 ...

  5. 使用 DBCC IND 查看BTree 和 Heap结构

    Table 有两种结构:BTree 和 Heap,一个table的结构必定是其中之一.如果在表上创建clustered index,那么表的结构是BTree:如果表上没有创建Clustered ind ...

  6. py2exe使用中遇到的几个问题

    问题: 在使用py2exe对所写的python脚本打包成.exe可执行程序时,遇到两个问题: 问题1: RuntimeError: maximum recursion depth exceeded w ...

  7. etlpy: 并行爬虫和数据清洗工具（开源）

    etlpy是python编写的网页数据抓取和清洗工具,核心文件etl.py不超过500行,具备如下特点 爬虫和清洗逻辑基于xml定义,不需手工编写 基于python生成器,流式处理,对内存无要求 内置 ...

  8. 45 个非常有用的 Oracle 查询语句

    ​ 这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询.这些是所有 Oracle 开发者都必备的技能,所以快 ...

  9. LVS+Keepalived搭建MyCAT高可用负载均衡集群

    LVS+Keepalived 介绍 LVS LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国 ...

  10. MySQL分区总结

    MySQL支持RANGE,LIST,HASH和KEY四种分区.其中,每个分区又都有一种特殊的类型.对于RANGE分区,有RANGE COLUMNS分区.对于LIST分区,有LIST COLUMNS分区 ...