Home>

(1) html code:

<div>
  <div>
   <a href="images/01.jpg">
    <img src="images/01_mid.jpg" rel="images/01.jpg" /></a>
  </div>
  <ul>
   <li>
    <div>
     <a href="#">
      <img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div>
   </li>
   <li>
    <div>
     <a href="#">
      <img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div>
   </li>
   <li>
    <div>
     <a href="#">
      <img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div>
   </li>
   <li>
    <div>
     <a href="#">
      <img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div>
   </li>
   <li>
    <div>
     <a href="#">
      <img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div>
   </li>
  </ul>
 </div>

(2) css code:

html {overflow-y:scroll;}
body {margin:0;font:12px "\ 5b8b \ 4f53", san-serif;background:#ffffff;}
div, ul, li {padding:0;margin:0;}
li {list-style-type:none;}
img {vertical-align:top;border:0;}
/* box * /
.box {width:310px;margin:100px auto;}
.tb-pic a {display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img {vertical-align:middle;}
.tb-pic a {* display:block;* font-family:arial;* line-height:1;}
.tb-thumb {margin:10px 0 0;overflow:hidden;}
.tb-thumb li {background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a {height:310px;width:310px;}
.tb-s310, .tb-s310 img {max-height:310px;max-width:310px;}
.tb-s310 a {* font-size:271px;}
.tb-s40 a {* font-size:35px;}
.tb-s40, .tb-s40 a {height:40px;width:40px;}
.tb-booth {border:1px solid #cdcdcd;position:relative;z-index:1;}
.tb-thumb .tb-selected {background:none repeat scroll 0 0 #c30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div {background-color:#ffffff;border:medium none;}
.tb-thumb li div {border:1px solid #cdcdcd;}
div.zoomdiv {z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #cccccc;display:none;text-align:center;overflow:hidden;}
div.zoommask {position:absolute;background:url ("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}

The example in this article describes the special effect of magnifying glass for jquery Taobao product pictures.Share to everyone for your reference.details as follows:

This is a special effect code based on jquery Taobao product picture magnifier.The implementation process is simple.

Tip:If the browser does not work properly,Try switching the browsing mode.

The jquery Taobao product picture magnifying glass special effect code for everyone to share is as follows

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery Taobao product picture magnifier code</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.imagezoom.min.js"</script>
<style type="text/css">
html {overflow-y:scroll;}
body {margin:0;font:12px "\ 5b8b \ 4f53", san-serif;background:#ffffff;}
div, ul, li {padding:0;margin:0;}
li {list-style-type:none;}
img {vertical-align:top;border:0;}
/* box * /
.box {width:310px;margin:100px auto;}
.tb-pic a {display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img {vertical-align:middle;}
.tb-pic a {* display:block;* font-family:arial;* line-height:1;}
.tb-thumb {margin:10px 0 0;overflow:hidden;}
.tb-thumb li {background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a {height:310px;width:310px;}
.tb-s310, .tb-s310 img {max-height:310px;max-width:310px;}
.tb-s310 a {* font-size:271px;}
.tb-s40 a {* font-size:35px;}
.tb-s40, .tb-s40 a {height:40px;width:40px;}
.tb-booth {border:1px solid #cdcdcd;position:relative;z-index:1;}
.tb-thumb .tb-selected {background:none repeat scroll 0 0 #c30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div {background-color:#ffffff;border:medium none;}
.tb-thumb li div {border:1px solid #cdcdcd;}
div.zoomdiv {z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #cccccc;display:none;text-align:center;overflow:hidden;}
div.zoommask {position:absolute;background:url ("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
</style>
</head>
<body>
<div>
 <div>
 <a href="images/01.jpg"><img src="images/01_mid.jpg" rel="images/01.jpg" /></a>
 </div>
 <ul>
 <li><div><a href="#"><img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div></li>
 <li><div><a href="#"><img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div></li>
 <li><div><a href="#"><img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div></li>
 <li><div><a href="#"><img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div></li>
 <li><div><a href="#"><img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div></li>
 </ul>
</div>
<script type="text/javascript">
$(document) .ready (function () {
 $(". jqzoom"). imagezoom ();
 $("#thumblist li a"). click (function () {
 $(this) .parents ("li"). addclass ("tb-selected"). siblings (). removeclass ("tb-selected");
 $(". jqzoom"). attr ("src", $(this) .find ("img"). attr ("mid"));
 $(". jqzoom"). attr ("rel", $(this) .find ("img"). attr ("big"));
 });
});
</script>
<divmicrosoft yahei ";">
</div>
 </body>
 </html>
  • Previous In-depth analysis of Java packages
  • Next Solve the problem of OutOfMemoryError in Java