放大镜代码基于jQuery淘宝产品共享图像

本文主要介绍了淘宝产品图片放大镜的jQuery特效，鼠标点击图片，图片放大，特别是对图像的细节显示，感兴趣的小伙伴可以参考一下。

（1）HTML代码：



（2）CSS代码：

html { overflow-y：滚动；}
体{ margin: 0；字体：12px 5b8b 4f53
div，UL，Li填充：0；边距：0；}
李{列表样式类型：无；}
img {垂直对齐：顶；边界：0；}

框
。箱{宽度：310px；保证金：100px汽车；}
显示：表格单元格；文本对齐：居中；垂直对齐：中间；}
TB图片垂直对齐：img { }中；
TB图片{ *显示：块；*字体家庭：Arial；*线高度：1；}
10px。结核拇指{ margin: 00；溢出：隐藏；}
背景：拇指。结核病李{没有重复滚动00透明；浮动：左；身高：42px；保证金：0 6px 00；溢出：隐藏；填充：1px；}。
。tb-s310，。tb-s310一{身高：310px；宽度：310px；}
。tb-s310，。tb-s310 img {最大高度：310px；最大宽度：310px；}
。tb-s310一{ *字体大小：271px；}
。tb-s40一{ *字体大小：35px；}
。tb-s40，。tb-s40一{身高：40px；宽度：40px；}
。结核{ border: 1px solid展位# cdcdcd的十四行诗；位置：相对；Z指数：1；}
拇指。结核病。结核病选择{背景：没有重复滚动00 # c30008；身高：40px；填充：2px；}
。tb-thumb.tb-selected div {背景颜色：# ffffff；边界：介质无；}
TB拇指李{ border: 1px solid div # cdcdcd的十四行诗；}
div.zoomdiv { Z指数：999；位置：绝对；顶部：0px；左：0px；宽度：200px；高度：200px；背景：# ffffff；边框1px solid # cccccc；显示：无；# cccccc；}。
div.zoommask {位置：绝对；背景：URL（图像/面具。png）重复滚动00透明；光标：移动；Z指数：1；}
本文讲述的图片放大镜的jQuery淘宝产品的特殊效果。分享给你供你参考。以下是如下：

这是基于jQuery淘宝产品图片放大镜特效代码，实现的过程是非常简单的。

运行效果图：
提示：如果不能在浏览器中正常运行，可以尝试切换浏览模式。

jQuery淘宝产品图片放大镜特殊代码为你分担

jQuery淘宝产品图片放大镜代码

html { overflow-y：滚动；}
体{ margin: 0；字体：12px 5b8b 4f53
div，UL，Li填充：0；边距：0；}
李{列表样式类型：无；}
img {垂直对齐：顶；边界：0；}

框
。箱{宽度：310px；保证金：100px汽车；}
显示：表格单元格；文本对齐：居中；垂直对齐：中间；}
TB图片垂直对齐：img { }中；
TB图片{ *显示：块；*字体家庭：Arial；*线高度：1；}
10px。结核拇指{ margin: 00；溢出：隐藏；}
背景：拇指。结核病李{没有重复滚动00透明；浮动：左；身高：42px；保证金：0 6px 00；溢出：隐藏；填充：1px；}。
。tb-s310，。tb-s310一{身高：310px；宽度：310px；}
。tb-s310，。tb-s310 img {最大高度：310px；最大宽度：310px；}
。tb-s310一{ *字体大小：271px；}
。tb-s40一{ *字体大小：35px；}
。tb-s40，。tb-s40一{身高：40px；宽度：40px；}
。结核{ border: 1px solid展位# cdcdcd的十四行诗；位置：相对；Z指数：1；}
拇指。结核病。结核病选择{背景：没有重复滚动00 # c30008；身高：40px；填充：2px；}
。tb-thumb.tb-selected div {背景颜色：# ffffff；边界：介质无；}
TB拇指李{ border: 1px solid div # cdcdcd的十四行诗；}
div.zoomdiv { Z指数：999；位置：绝对；顶部：0px；左：0px；宽度：200px；高度：200px；背景：# ffffff；边框1px solid # cccccc；显示：无；# cccccc；}。
div.zoommask {位置：绝对；背景：URL（图像/面具。png）重复滚动00透明；光标：移动；Z指数：1；}

$（文档）Ready（函数（）{）

$（。jqzoom ）Imagezoom（）；

$（# thumblist李）。Click（function（）{（）{）
$（这）。父母（礼），AddClass（TB选），兄弟姐妹（）。RemoveClass（TB选择）；
$（。jqzoom）。Attr（'src美元，（这）找到（IMG）。Attr（中）））；
$（。jqzoom）。Attr（'rel美元，（这）找到（IMG）。Attr（大）））；
}）；

}）；
以上是分享jQuery淘宝产品图片放大镜特效代码，希望大家能够喜欢它并把它应用于实践。