[转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

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

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

效果图一

效果图二

[html] view plaincopyprint?
  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.   
  8. <link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">  
  9. <style type"text/css">  
  10.   
  11. body{margin:0px;padding:0px;font-family:Arial;}  
  12. a img,:link img,:visited img { border: none; }  
  13. table { border-collapse: collapse; border-spacing: 0; }  
  14. :focus { outline: none; }  
  15. *{margin:0;padding:0;}  
  16. p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}  
  17. fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}  
  18. fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}  
  19. dl dd{margin:0px;}  
  20. dl dt{}  
  21.   
  22. .clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}  
  23. .clearfix{display:block;zoom:1}  
  24.   
  25.   
  26. ul#thumblist{display:block;}  
  27. ul#thumblist li{float:left;margin-right:2px;list-style:none; text-align:center;height:80px; line-height:80px; 100px;overflow:hidden;}  
  28. ul#thumblist li a{display:block;border:1px solid #CCC;height:78px; line-height:78px; 98px;overflow:hidden;}  
  29. ul#thumblist li a.zoomThumbActive{  
  30.     border:1px solid red;height:78px; line-height:78px; 98px;overflow:hidden;  
  31. }  
  32. ul#thumblist li img{ height:80px;}  
  33. .jqzoom{  
  34.     text-decoration:none;  
  35.     float:left;  
  36. }  
  37. </style>  
  38. <script type="text/javascript">  
  39. //使用方法  
  40. $(document).ready(function() {  
  41.     $('.jqzoom').jqzoom({  
  42.             zoomType: 'innerzoom',  
  43.             lens:true,  
  44.             preloadImages: true,  
  45.             alwaysOn:false  
  46.               
  47.         });  
  48.       
  49. });  
  50.   
  51.   
  52. </script>  
  53. </head>  
  54.   
  55. <body>  
  56. <div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;500px;" >  
  57.     <div class="clearfix">  
  58.         <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >  
  59.             <img src="imgProd/triumph_small1.jpg"  title="triumph"  style="border: 1px solid #666;">  
  60.         </a>    
  61.     </div>  
  62.     <br/>  
  63.  <div class="clearfix" >  
  64.     <ul id="thumblist" class="clearfix" >  
  65.         <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>  
  66.         <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>  
  67.         <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>  
  68.     </ul>  
  69.     </div>  
  70. </div>  
  71. </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; 100px;overflow:hidden;}
ul#thumblist li a{display:block;border:1px solid #CCC;height:78px; line-height:78px; 98px;overflow:hidden;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;height:78px; line-height:78px; 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;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>

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

[html] view plaincopyprint?
  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/

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/freeliver54/p/3623649.html