JQ图片放大镜插件，jQueryMagnifier下载及使用方法

此插件基于Jquery库，使用之前需要引入jq及Magnifier文件，此插件效果如下：

使用方法：

<link rel="stylesheet" type="text/css" href="css/magnifier.css"> <!--引入样式文件-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <!--引入js文件-->
<script type="text/javascript" src="js/magnifier.js"></script>

使用实例：

<!--Html部分-->
<div class="magnifier" id="magnifier1">
		<div class="magnifier-container">
			<div class="images-cover"></div>
			<!--当前图片显示容器-->
			<div class="move-view"></div>
			<!--跟随鼠标移动的盒子-->
		</div>
		<div class="magnifier-assembly">
			<div class="magnifier-btn">
				<span class="magnifier-btn-left">&lt;</span>
				<span class="magnifier-btn-right">&gt;</span>
			</div>
			<!--按钮组-->
			<div class="magnifier-line">
				<ul class="clearfix animation03">
					<li>
						<div class="small-img">
							<img src="images/1.png" />
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="images/2.png" />
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="images/3.png" />
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="images/4.png" />
						</div>
					</li>
					<li>
						<div class="small-img">
							<img src="images/1.png" />
						</div>
					</li>
				</ul>
			</div>
			<!--缩略图-->
		</div>
		<div class="magnifier-view"></div>
		<!--经过放大的图片显示容器-->
	</div>

<!--js代码部分-->
$(function() {
	
	var magnifierConfig = {
		magnifier : "#magnifier1",//最外层的大容器
		width : 500,//承载容器宽
		height : 500,//承载容器高
		moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
		zoom : 5//缩放比例
	};

	var _magnifier = magnifier(magnifierConfig);

	/*magnifier的内置函数调用*/
	/*
		//设置magnifier函数的index属性
		_magnifier.setIndex(1);

		//重新载入主图,根据magnifier函数的index属性
		_magnifier.eqImg();
	*/
});

提取码：9gm7