图片放大镜插件:jqzoom
版本: jqzoom_ev-2.3、jquery-1.6.js
1、源码:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title>image upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom-core-pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css" />
<script>
jQuery(document).ready(function(){
jQuery('.jqzoom').jqzoom({
zoomType: 'standard',
lens: true,
preloadImages: false,
alwaysOn: false
});
});
</script>
<style type"text/css">
.clearfix:after{
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix{
display: block;
zoom: 1
}
.jqzoom{
text-decoration:none;
float:left;
}
</style>
</head>
<body leftmargin="10" topmargin="10">
<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
<div class="clearfix">
<a href="images/jqzoom/img_big.jpg" class="jqzoom">
<img src="images/jqzoom/img_litter.jpg" style="border: 4px solid blue;">
</a>
</div>
</div>
</body>
</html>