本文转自：http://blog.csdn.net/weizengxun/article/details/6768183

鼠标放在图片上显示图片的放大镜效果使用jqzoom实现，本例版本2.3

效果图一

效果图二

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>JQzoom 2 Demo</title>
  5. <script src="../js/jquery-1.6.js" type="text/javascript"></script>
  6. <script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
  7. <link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
  8. <style type"text/css">
  9. body{margin:0px;padding:0px;font-family:Arial;}
  10. a img,:link img,:visited img { border: none; }
  11. table { border-collapse: collapse; border-spacing: 0; }
  12. :focus { outline: none; }
  13. *{margin:0;padding:0;}
  14. p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
  15. fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
  16. fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
  17. dl dd{margin:0px;}
  18. dl dt{}
  19. .clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
  20. .clearfix{display:block;zoom:1}
  21. ul#thumblist{display:block;}
  22. ul#thumblist li{float:left;margin-right:2px;list-style:none; text-align:center;height:80px; line-height:80px; width:100px;overflow:hidden;}
  23. ul#thumblist li a{display:block;border:1px solid #CCC;height:78px; line-height:78px; width:98px;overflow:hidden;}
  24. ul#thumblist li a.zoomThumbActive{
  25. border:1px solid red;height:78px; line-height:78px; width:98px;overflow:hidden;
  26. }
  27. ul#thumblist li img{ height:80px;}
  28. .jqzoom{
  29. text-decoration:none;
  30. float:left;
  31. }
  32. </style>
  33. <script type="text/javascript">
  34. //使用方法
  35. $(document).ready(function() {
  36. $('.jqzoom').jqzoom({
  37. zoomType: 'innerzoom',
  38. lens:true,
  39. preloadImages: true,
  40. alwaysOn:false
  41. });
  42. });
  43. </script>
  44. </head>
  45. <body>
  46. <div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
  47. <div class="clearfix">
  48. <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >
  49. <img src="imgProd/triumph_small1.jpg"  title="triumph"  style="border: 1px solid #666;">
  50. </a>
  51. </div>
  52. <br/>
  53. <div class="clearfix" >
  54. <ul id="thumblist" class="clearfix" >
  55. <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
  56. <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
  57. <li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb31.jpg'></a></li>
  58. </ul>
  59. </div>
  60. </div>
  61. </body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>JQzoom 2 Demo</title>

<script src="../js/jquery-1.6.js" type="text/javascript"></script>

<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>

<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">

<style type"text/css">

body{margin:0px;padding:0px;font-family:Arial;}

a img,:link img,:visited img { border: none; }

table { border-collapse: collapse; border-spacing: 0; }

:focus { outline: none; }

*{margin:0;padding:0;}

p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}

fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}

fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}

dl dd{margin:0px;}

dl dt{}

.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}

.clearfix{display:block;zoom:1}

ul#thumblist{display:block;}

ul#thumblist li{float:left;margin-right:2px;list-style:none; text-align:center;height:80px; line-height:80px; width:100px;overflow:hidden;}

ul#thumblist li a{display:block;border:1px solid #CCC;height:78px; line-height:78px; width:98px;overflow:hidden;}

ul#thumblist li a.zoomThumbActive{

    border:1px solid red;height:78px; line-height:78px; width:98px;overflow:hidden;

}

ul#thumblist li img{ height:80px;}

.jqzoom{

	text-decoration:none;

	float:left;

}

</style>

<script type="text/javascript">

//使用方法

$(document).ready(function() {

	$('.jqzoom').jqzoom({

            zoomType: 'innerzoom',

            lens:true,

            preloadImages: true,

            alwaysOn:false

        });

});

</script>

</head>

<body>

<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >

    <div class="clearfix">

        <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >

            <img src="imgProd/triumph_small1.jpg"  title="triumph"  style="border: 1px solid #666;">

        </a>

    </div>

	<br/>

 <div class="clearfix" >

	<ul id="thumblist" class="clearfix" >

		<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>

		<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>

		<li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb31.jpg'></a></li>

	</ul>

	</div>

</div>

</body></html>

相关的参数设置（附上中文翻译）

  1. OPTION NAME     DEFAULT     DESCRIPTION
  2. zoomType    'standard'      The others admitted option values are 'reverse','drag','innerzoom'.
  3. zoom模式，可选参数'reverse','drag','innerzoom'
  4. zoomWidth   300         The popup window width showing the zoomed area.
  5. 弹出的div的宽
  6. zoomHeight  300         The popup window height showing the zoomed area.
  7. 弹出的div的高
  8. xOffset     10          The popup window x offset from the small image. (always positive to move the popup window more on the right if position is "right" or more on the left if position is "left")
  9. 弹出的div的x轴偏离，如果position属性设为right，则是距离右边的距离。
  10. yOffset     0           The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom"),
  11. 弹出的div的x轴偏离，同上。
  12. position        'right'     The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom'
  13. 弹出的div的位置在左边，在右边，可选参数：'right' ,'left' ,'top' ,'bottom'。
  14. preloadImages   true        if set to true,jqzoom will preload large images.
  15. 是否弹出大图，如果为true则弹出大图。
  16. preloadText     'Loading zoom'  The text to show while preloading images.
  17. 当加载图片时显示的文字。
  18. title       true        Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title.
  19. 当地弹出div时在div的顶部显示一个标题，如果没有指定则取缩略图的的标题
  20. lens        true        if set to false,the small lens,over the image, won't show.
  21. 是否显示小图上的小div，如果设置为false则在图片上的div不显示。
  22. imageOpacity    0.4         Set the image opacity when the 'zoomType' option is set to 'reverse'.
  23. 图片遮罩层的透明度，仅当'zoomType' 的模式为'reverse'时起效。
  24. showEffect      'show'      The effect by which showing the popup window.Options available: 'show' ,'fadein'.
  25. 设置大图弹出的方式，可选参数：'show' (显示),'fadein'(淡入)。
  26. hideEffect      'hide'      The effect by which hiding the popup window.Options available: 'hide' ,'fadeout'.
  27. 设置大图隐藏的方式，可选参数：'hide' (隐藏),'fadeout'(淡出)。
  28. fadeinSpeed     'slow'      Changes fade in speed,in case the showEffect option is set to 'fadein'.(options: 'fast','slow',number)
  29. 设置图片弹出的速度，仅当showEffect设置为fadein时有效，可选参数:'fast','slow',数字
  30. fadeoutSpeed    '2000'      Changes fade out speed,in case the hideEffect option is set to 'fadeout'.(options: 'fast','slow',number)
  31. 设置图片隐藏的速度，仅当showEffect设置为fadeout时有效，可选参数:'fast','slow',数字
OPTION NAME    	DEFAULT    	DESCRIPTION

zoomType  	'standard'    	The others admitted option values are 'reverse','drag','innerzoom'.

				zoom模式，可选参数'reverse','drag','innerzoom'

zoomWidth  	300    		The popup window width showing the zoomed area.

				弹出的div的宽

zoomHeight 	300    		The popup window height showing the zoomed area.

				弹出的div的高

xOffset    	10    		The popup window x offset from the small image. (always positive to move the popup window more on the right if position is "right" or more on the left if position is "left")

				弹出的div的x轴偏离，如果position属性设为right，则是距离右边的距离。

yOffset    	0    		The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom"),

				弹出的div的x轴偏离，同上。

position    	'right'    	The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom'

				弹出的div的位置在左边，在右边，可选参数：'right' ,'left' ,'top' ,'bottom'。

preloadImages   true    	if set to true,jqzoom will preload large images.

				是否弹出大图，如果为true则弹出大图。

preloadText    	'Loading zoom'  The text to show while preloading images.

				当加载图片时显示的文字。

title    	true    	Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title.

				当地弹出div时在div的顶部显示一个标题，如果没有指定则取缩略图的的标题

lens    	true    	if set to false,the small lens,over the image, won't show.

				是否显示小图上的小div，如果设置为false则在图片上的div不显示。

imageOpacity    0.4    		Set the image opacity when the 'zoomType' option is set to 'reverse'.

				图片遮罩层的透明度，仅当'zoomType' 的模式为'reverse'时起效。

showEffect    	'show'    	The effect by which showing the popup window.Options available: 'show' ,'fadein'.

				设置大图弹出的方式，可选参数：'show' (显示),'fadein'(淡入)。

hideEffect    	'hide'    	The effect by which hiding the popup window.Options available: 'hide' ,'fadeout'.

				设置大图隐藏的方式，可选参数：'hide' (隐藏),'fadeout'(淡出)。

fadeinSpeed    	'slow'    	Changes fade in speed,in case the showEffect option is set to 'fadein'.(options: 'fast','slow',number)

				设置图片弹出的速度，仅当showEffect设置为fadein时有效，可选参数:'fast','slow',数字

fadeoutSpeed    '2000'    	Changes fade out speed,in case the hideEffect option is set to 'fadeout'.(options: 'fast','slow',number)

				设置图片隐藏的速度，仅当showEffect设置为fadeout时有效，可选参数:'fast','slow',数字

官方网站：http://www.mind-projects.it/projects/jqzoom/

[转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3的更多相关文章

  1. 图解android开发在界面上显示图片

    图解android开发在界面上显示图片<申明:转自百度> <原文章地址:http://jingyan.baidu.com/article/49711c6153a277fa441b7c ...

  2. 对话框上动态控件的创建、在Picture Control控件上显示图片

    1  MFC对话框之上的动态控件的创建 对话框上的控件是MFC类的一个具体对象. 当在对话框之上使用静态控件时,可以根据类向导来为每个控件添加消息.响应函数以及变量. 当需要在对话框中动态的创建某个控 ...

  3. iOS View自定义窍门——UIButton实现上显示图片，下显示文字

    “UIButton实现上显示图片,下显示文字”这个需求相信大家在开发中都或多或少会遇见.比如自定义分享View的时候.当然,也可以封装一个item,上边imageView,下边一个label.但是既然 ...

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

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

  5. 2019-3-16-win10-uwp-鼠标移动到图片上切换图片

    title author date CreateTime categories win10 uwp 鼠标移动到图片上切换图片 lindexi 2019-03-16 14:43:46 +0800 201 ...

  6. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  7. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  8. CSS实现鼠标放图片上显示白色边框+文字描写叙述

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

  9. ABAP 在屏幕上显示图片

    1.se78 上传 或 预览图片 图片预览 2.程序代码 定义各变量 DATA: H_PICTURE TYPE REF TO CL_GUI_PICTURE, H_PIC_CONTAINER TYPE ...

随机推荐

  1. wordCount总结

    1.github地址:https://github.com/husterSyy/SoftTest 2.PSP表格   psp 2.1 psp阶段 预估耗时(分钟) 实际耗时(分钟) Planning ...

  2. Spring第六篇---AOP

    接着Spring第五篇讲 我们今天将叙述以下几个知识点 1 什么是AOP AOP 是一种思想  横向重复  纵向抽取 在软件业,AOP为Aspect Oriented Programming的缩写,意 ...

  3. C语言关键字：auto、static、register、const、volatile 、extern 总结 <转>

    auto 这个这个关键字用于声明变量的生存期为自动,即将不在任何类.结构.枚举.联合和函数中定义的变量视为全局变量,而在函数中定义的变量视为局部变量.这个关键字不怎么多写,因为所有的变量默认就是aut ...

  4. Djianggo 在windows中安装出现报错的解决方案

    Djianggo 在win7下 安装会报错 Traceback (most recent call last):File "setup.py", line 4, in <mo ...

  5. Java50道经典习题-程序48 数字加密

    题目:某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都加上5,然后用和除以10的余数代替该数字,再将第一位和第四位交换,第二位和第三位交换.分析:例如原始 ...

  6. Algorithms - Quick Sort

    印象 图2 快速排序过程 思想 通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序的目的. 分析 稳定: ...

  7. [SinGuLaRiTy] (树形)数据结构题目复习

    [SinGuLaRiTy-1023] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 普通平衡树 题目描述 你需要写一种数据结构(可参考题目标 ...

  8. CSS选择器及CSS样式表

    前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...

  9. 智能合约安全事故回顾（3）-DOS漏洞导致的KotET事件

    现实世界中的网络都是有带宽限制的,想象一下,一个访问量稳定的网站,突然有人利用某种方式爆发式的将网站的访问量提升,这个时候系统会作何反应?如果系统没有合理的防DOS攻击的方式,这种时候往往会造成服务器 ...

  10. SP16549 QTREE6 - Query on a tree VI LCT维护颜色联通块

    \(\color{#0066ff}{ 题目描述 }\) 给你一棵n个点的树,编号1~n.每个点可以是黑色,可以是白色.初始时所有点都是黑色.下面有两种操作请你操作给我们看: 0 u:询问有多少个节点v ...