[转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
2014-03-25 17:30
375 查看
本文转自：http://blog.csdn.net/weizengxun/article/details/6768183
鼠标放在图片上显示图片的放大镜效果使用jqzoom实现，本例版本2.3
效果图一
效果图二
[html] view plaincopyprint?
<!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>
相关的参数设置（附上中文翻译）
[html] view plaincopyprint?
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/
鼠标放在图片上显示图片的放大镜效果使用jqzoom实现，本例版本2.3
效果图一
效果图二
[html] view plaincopyprint?
<!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>
<!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>
相关的参数设置（附上中文翻译）
[html] view plaincopyprint?
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',数字
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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
- Jquery实现鼠标放在图片上面显示大图效果
- 鼠标放在图片上面显示图片放大效果 （转）
- JQUERY实现鼠标悬停在图片上模拟放大镜效果
- JQuery实现鼠标移动到图片上显示边框效果
- jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果
- jQuery制作鼠标经过显示图片大图，生成图片tips效果
- Jquery-图片切换和图片放大镜效果(jqzoom + jcarousel )
- 基于jQuery插件jqzoom实现的图片放大镜效果示例
- 鼠标放在图片上面显示图片放大效果
- Jquery-图片切换和图片放大镜效果(jqzoom + jcarousel )
- jQuery-图片的放大镜显示效果(需要大小图)
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- 鼠标移动到图片上右边显示放大镜效果。
- jQuery-实现图片的放大镜显示效果
- 鼠标移到图片上变大显示而不是放大镜效果
- 分享一个jquery插件：实现类似淘宝上鼠标经过图片右侧显示大图的效果
- 用JQuery模仿淘宝的图片放大镜显示效果
- 用JQuery模仿淘宝的图片放大镜显示效果