图片放大镜插件: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>


图片放大镜插件:jqzoom