鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
2011-09-11 23:04
363 查看
鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3
效果图一
效果图二
相关的参数设置(附上中文翻译)
效果图一
效果图二
<!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>
相关的参数设置(附上中文翻译)
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
- 鼠标移到图片上变大显示而不是放大镜效果
- 鼠标移动到图片上右边显示放大镜效果。
- 鼠标移到图片上变大显示而不是放大镜效果
- Jquery实现鼠标放在图片上面显示大图效果
- 鼠标放在图片上面显示图片放大效果 (转)
- 鼠标放在图片上面显示图片放大效果
- (源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字
- SCRIPT鼠标放在图片上才显示色彩 平时是灰色的图片
- 鼠标滑过显示图片大图效果
- 鼠标放在一个连接上,会显示图片(类似tooltip)
- js鼠标滑动图片显示隐藏效果
- 网页图片放大镜效果——jqzoom
- 动态显示图片,并为hyperlink 做鼠标悬停效果
- 鼠标经过的图片高亮显示,其余变暗效果[xyytit]
- 鼠标放在图片上显示大图
- 用JQuery模仿淘宝的图片放大镜显示效果
- 鼠标放在一个连接上,会显示图片(类似tooltip)
- 鼠标放在图片上 显示提示的文字
- 如何实现鼠标放在图片上出现文字说明效果?