html中放大镜插件,第10款插件：jquery.jqzoom.js放大镜效果插件

JS引用代码：

[js]

$(function () {

$('.jqzoom').jqzoom();

});

[/js]

HTML代码：

[html]

[/html]

CSS代码：

[css]

[/css]

代码如下：

[css]

.jqzoom{

border:1px solid black;

float:left;

position:relative;

padding:0px;

cursor:pointer;

}

.jqzoom img{

float:left;

}

div.zoomdiv {

z-index                 : 100;

position                : absolute;

top:0px;

left:0px;

width                   : 200px;

height                  : 200px;

background: #ffffff;

border:1px solid #CCCCCC;

display:none;

text-align: center;

overflow: hidden;

}

div.jqZoomPup {

z-index                 : 10;

visibility              : hidden;

position                : absolute;

top:0px;

left:0px;

width                   : 50px;

height                  : 50px;

border: 1px solid #aaa;

background: #ffffff url(../images/zoom.gif) 50% top  no-repeat;;

opacity: 0.5;

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

filter: alpha(Opacity=50);

}

[/css]