这篇文章主要介绍了jQuery淘宝产品图片放大镜特效，鼠标点击图片，图片放大，特别适合图片细节展示，感兴趣的小伙伴可以参考下(1)html代码：

div class=' box ' div class=' TB-booth TB-pic TB-s310 ' a href=' images/01。jpg ' img src=' http : images/01 _ mid。jpg ' alt='美女rel=' images/01。jpg ' class=' jqzoom '/a/div ul class=' TB-thumb ' id='拇指列表Li class=' TB-selected ' div class=' TB-pic TB-s40 ' a href=' # ' img src=' http : images/01 _ small。jpg ' mid=' images/01 _ mid。jpg ' big=' images/01。jpg '/a/div/Li div=' TB-pic TB-s40代码：

html { overflow-y :滚动；} body { margin :0 font :12 px ' 5B8B 4F53 '，San-serif；背景： # ffffff} div，ul，Li { padd :0 margin :0 } Li { list-style-type : none；} img {垂直对齐：顶部；border:0} /*框*/。box { width :310 pxmargin 3360100 px auto }。TB-pic a { display : table-cell；文本对齐：居中；垂直对齐：毫米；} .t B- pic a img垂直对齐align:middle}。TB-pic a { *显示：块；* font-family : arial*线高：1;} .TB-thumb { margin 336010 px 0 0；飞越：隐藏；} .李{背景：无}重复滚动0 0透明；float:leftheight:42px余量：0 6px 0 0飞越：隐藏；padding:1px }。tb-s310 .TB-s310 a {高度：310 px宽度宽度：310px}。tb-s310 .TB-s310 img {最大高度：310 px最大宽度宽度：310px}。TB-s310 a { * font-size :271 px；} .TB-s40 a { * font-size :35 px；} .tb-s40 .TB-s40 a {高度：40 px宽度：40 px} .TB-booth { border :1 px solid # CDCDCD；位置：相对；z索引：1;} .肺结核拇指结核病所选{ background:none重复滚动0 0 # C30008高度：40 pxpadding:2px }。肺结核拇指结核病选定的div {底色： # FFFFFFborder:medium none}。TB-thumb Li div {边框：1 px实心# CDCDCDCD；} div。zoomdiv { z-index :999位置：绝对；top:0pxleft:0px宽度宽度：200像素高度：200 px背景# ffffffborder:1px固体# CCCCCC；display:none文本对齐：居中；飞越：隐藏；} div。zoommask {位置：绝对；背景： URL('图像/遮罩。png ')重复滚动0 0透明；cursor:movez索引：1;} 本文实例讲述了jQuery淘宝产品图片放大镜特效。分享给大家供大家参考。具体如下：这是一款基于jQuery淘宝产品图片放大镜特效代码，实现过程很简单。运行效果图： - 查看效果源码下载-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jQuery淘宝产品图片放大镜特效代码如下

hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery淘宝产品图片放大镜代码/title脚本类型=' text/JavaScript ' src=' http : js/jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。imagezoom。量滴js '/脚本样式类型=' text/CSS ' html { overflow-y 3360 croll；} body { margin :0 font :12 px ' 5B8B 4F53 '，San-serif；背景： # ffffff}div，ul，Li { padd :0 margin :0 } Li { list-style-type : none；} img {垂直对齐：顶部；border:0}/*框*/。box { width :310 pxmargin 3360100 px auto }。TB-pic a { display : table-cell；文本对齐：居中；垂直对齐：毫米；}.t B- pic a img垂直对齐align:middle}。TB-pic a { *显示：块；* font-family : arial*线高：1;}.TB-thumb { margin 336010 px 0 0；飞越：隐藏；}.李{背景：无}重复滚动0 0透明；float:leftheight:42px余量：0 6px 0 0飞越：隐藏；padding:1px }。tb-s310 .TB-s310 a {高度：310 px宽度宽度：310px}。tb-s310 .TB-s310 img {最大高度：310 px最大宽度宽度：310px}。TB-s310 a { * font-size :271 px；}.TB-s40 a { * font-size :35 px；}.tb-s40 .TB-s40 a {高度：40 px宽度：40 px}.TB-booth { border :1 px solid # CDCDCD；位置：相对；z索引：1;}.肺结核拇指结核病所选{ background:none重复滚动0 0 # C30008高度：40 pxpadding:2px }。肺结核拇指结核病选定的div {底色： # FFFFFFborder:medium none}。TB-thumb Li div {边框：1 px实心# CDCDCDCD；} div。zoomdiv { z-index :999位置：绝对；top:0pxleft:0px宽度宽度：200像素高度：200 px背景# ffffffborder:1px固体# CCCCCC；display:none文本对齐：居中；飞越：隐藏；} div。zoommask {位置：绝对；背景： URL('图像/遮罩。png ')重复滚动0 0透明；cursor:movez索引：1;}/style/head dydiv class=' box ' div class=' TB-booth t B- pic TB-s310 ' a href=' images/01。jpg ' img src=' http : images/01 _ mid。jpg ' alt='美女rel=' images/01。jpg ' class=' jqzoom '/a/div ul class=' TB-thumb ' id=' thumb list ' Li class=' TB-selected ' div class=' TB-pic TB-s40 ' a href=' # ' img src=' http : images/01 _ small。jpg ' mid=' images/01 _ mid。jpg ' big=' images/01。jpg '/a/div/Li Li div class=' TB-pic TB-s40ready(function(){ $(')' '' jqzoom ' .imagezoom()；$(' #拇指列表阿利')。单击(function(){ $(this)).父母("李")。addClass('tb-selected ').兄弟姐妹()。remove CLaSS(' TB-selected ')；$('.' jqzoom ' .attr('src '，$(this).查找(' img ').attr(' mid ')；$('.'' jqzoom ' .attr('rel '，$(this).查找(' img ').attr(' big ')；});});/script div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；/div /body /html以上就是为大家分享的jQuery淘宝产品图片放大镜特效代码，希望大家可以喜欢，并应用到实践中。