效果图片
样式:
<style type="text/css">
.jqzoom
{
float: left;
border: none;
position: relative;
padding: 0px;
cursor: pointer;
margin: 2px 6px;
display: block;
}
.zoomdiv
{
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: #ffffff;
border: 1px solid #CCCCCC;
display: none;
text-align: center;
overflow: hidden;
}
.jqZoomPup
{
z-index: 10;
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
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);
}
</style>
.jqzoom
{
float: left;
border: none;
position: relative;
padding: 0px;
cursor: pointer;
margin: 2px 6px;
display: block;
}
.zoomdiv
{
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: #ffffff;
border: 1px solid #CCCCCC;
display: none;
text-align: center;
overflow: hidden;
}
.jqZoomPup
{
z-index: 10;
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
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);
}
</style>
2.还要引入js库
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { $(".jqzoom").jqueryzoom({ xzoom: 300, yzoom: 300 }); });
</script>
3.测试的代码:
<!--测试放大镜效果-->
<div style="height: 310px; text-align: center;">
<span class="jqzoom">
<img jqimg="watermark.png" src="watermark.png" /></span>
</div>