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

以下是完整代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 <title>JQ实现鼠标经过显示大图效果-柯乐义</title>

 <meta name="description" content="JQ实现鼠标经过显示大图效果 柯乐义" /><meta name="keywords" content="JQ实现鼠标经过显示大图效果 keleyi.com" />

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <script type="text/javascript">

 $(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='柯乐义产品' width='765' height='574' />" + imgTitle + "</div>";

 $("body").append(tooltip);

 $("#tooltip")

 .css({

 "top": (e.pageY + y) + "px",

 "left": (e.pageX + x) + "px"

 }).show("fast");

 }).mouseout(function (e) {

 this.title = this.myTitle;

 $("#tooltip").remove();

 }).mousemove(function (e) {

 $("#tooltip").css({

 "top": (e.pageY + y) + "px",

 "left": (e.pageX + x) + "px"

 });

 });

 })

 </script>

 <style>

 ul{margin: 30px auto; width:1440px;}

 ul li{float: left; padding-right: 20px; list-style: none;}

 ul li img{width: 77px; height: 57px; padding: 6px; border: 1px solid #ccc; background-color:#eee; -webkit-border-radius: 8px;}

 #tooltip{

 position: absolute;

 background-color: #eee;

 border: 1px solid #999;

 width: 765px;

 height: 590px;

 -webkit-border-radius: 8px;

 font-family: "微软雅黑";

 padding: 20px;

 }

 </style>

 </head>

 <body>

 <div><a href="http://keleyi.com/a/bjac/h12vjfyv.htm" target="_blank">原文</a></div>

 <div><ul>

 <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>

 <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>

 <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>

 <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>

 </ul></div><div>柯乐义提醒您：把光标移动到图片上查看效果。</div>

 </body>

 </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. Atitit 动态调用webservice与客户端代理方式调用

    Atitit 动态调用webservice与客户端代理方式调用 方式1: 使用call.invoke  直接调用WSDL,缺点:麻烦,不推荐--特别是JAVA调用.NET的WS时,会有不少的问题需要解 ...

  2. Android知识——ViewHolder的作用与用法

    ViewHolder通常出现在适配器里,为的是listview滚动的时候快速设置值,而不必每次都重新创建很多对象,从而提升性能.在android开发中Listview是一个很重要的组件,它以列表的形式 ...

  3. 有关binlog的那点事（二）（mysql5.7.13）

    上次,我们仅仅把binlog做了一个概述,并没有去深入探索(1)binlog file究竟是怎么构成的?(2)binlog file的单元binlog events是怎么构成的?(3)我们能不能伪造出 ...

  4. Entity Framework Code First实体关联数据加载

    在项目过程中,两个实体数据之间在往往并非完全独立的,而是存在一定的关联关系,如一对一.一对多及多对多等关联.存在关联关系的实体,经常根据一个实体的实例来查询获取与之关联的另外实体的实例. Entity ...

  5. 【原创】.NET平台机器学习组件-Infer.NET连载(一)介绍

    Infer.NET机器学习翻译系列文章将进行连载,感兴趣的朋友请收藏或关注             本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/428 ...

  6. 新作《ASP.NET Web API 2框架揭秘》正式出版

    我觉得大部分人都是“眼球动物“,他们关注的往往都是目光所及的东西.对于很多软件从业者来说,他们对看得见(具有UI界面)的应用抱有极大的热忱,但是对背后支撑整个应用的服务却显得较为冷漠.如果我们将整个“ ...

  7. DOM-Node类型

    DOM(文档队形模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的一部分.DOM可以讲任何HTML和XML文档描绘成一 ...

  8. T-SQL：毕业生出门需知系列（三）

    第3课 排序检索数据 3.1 排序数据(ORDER BY) 下面的 SQL 语句返回某个数据库表的单个列.观察其输出,并没有特定的顺序. SELECT prod_name FROM Products; ...

  9. win7系统下如何配置php-Apache-mysql环境

    如何在win7系统下配置php环境呢,php+Apache+mysql都是在配置过程中必不可少的元素,php负责解析php代码,apache负责服务器端而mysql是数据交互的中转站. 那么如何将ph ...

  10. C# 将多个office文件转换及合并为一个PDF文件

    PDF文件介绍 PDF(Portable Document Format )文件源于20世纪90年代初期,如今早已成为了一种最流行的的文件格式之一.因为PDF文件有很多优点: 支持跨平台和跨设备共享 ...