• [转]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/
  • 相关阅读:
    nuget包管理器控制台下的powershell脚本介绍
    MSSQL数据库链接字符串Asynchronous Processing=true不是异步查询吗,怎么是缓存
    .net mvc web api 返回 json 内容，过滤值为null的属性
    序列化与反序列化成XML
    ASP.NET WebForm中用async/await实现异步
    webapi集成owin使用Oauth认证时能获取accee_token仍无法登录的解决办法
    C#异常类相关总结
    从多个XML文档中读取数据用于显示webapi帮助文档
    VS代码段扩展Snippet Designer is a Visual Studio plug in which allows you to create and search for snippets inside the IDE
    【工具】CodeSmith Generator 7.0.2激活步骤
  • 原文地址：https://www.cnblogs.com/freeliver54/p/3623649.html
Copyright © 2020-2023  润新知