放大鏡效果，被廣泛的應用於商城的商品展示，其效果相比大家都不陌生。其原理也不是很難，那麼今天就實現下放大鏡效果！

       主要的CSS樣式：溢位隱藏overflow:hidden，隱藏圖層display:none，邊距margin-left，margin-right

       用的主要事件：滑鼠移動事件mousemove()和滑鼠移出事件mouseout();

       原理與演算法：展示圖片的長寬/放大鏡裡的圖片長寬 = 放大鏡長寬/放大區域的長寬 = 滑鼠移動量 / 放大鏡顯示圖片的偏移量

       發文目的：希望可以得到大神的指點，無論是程式碼質量還是程式碼風格，亦或是有更好的實現方法，都請提出寶貴建議。同時也希望能給予和我一樣的菜鳥一定的幫助！

     程式碼展示：

       html程式碼：

<div class="con-FangDa" id="fangdajing">
      <div class="con-fangDaIMg">
        <img src="/uploads/rs/304/hownr3so/bb.jpg"><!-- 正常現實的圖片 -->
        <div class="magnifyingBegin"></div><!-- 滑塊 -->
        <div class="magnifyingShow"><!-- 放大鏡顯示的圖片 -->
          <img src="/uploads/rs/304/hownr3so/bb.jpg">
        </div>
      </div>
      <ul class="con-FangDa-ImgList"><!-- 圖片顯示列表 -->
        <li class="active"><img src="/uploads/rs/304/hownr3so/bb.jpg"></li>
        <li><img src="/uploads/rs/304/hownr3so/a.jpg"></li>
        <li><img src="/uploads/rs/304/hownr3so/bb.jpg"></li>
        <li><img src="/uploads/rs/304/hownr3so/a.jpg"></li>
        <li><img src="/uploads/rs/304/hownr3so/bb.jpg"></li>
      </ul>
    </div>  
 

*{margin:0;padding:0}
.con-FangDa{width:300px;height:550px;background-color:cyan}
.con-fangDaIMg{width:300px;height:450px;position:relative;background-color:#454545}
.con-fangDaIMg > img{width:100%;height:100%}
.magnifyingBegin{width:100px;height:100px;left:0;top:0;background-color:#454545;opacity:0.5;position:absolute;cursor:move;display:none}
.magnifyingShow{width:300px;height:300px;display:none;position:absolute;right:-300px;top:0;overflow:hidden;background-color:#454545}
.magnifyingShow > img{width:900px;height:1350px;margin-left:0;margin-top:0}
.con-FangDa-ImgList{list-style:none}
.con-FangDa-ImgList > li{width:50px;height:50px;float:left;margin:4px 0 0 4px;cursor:pointer;border:2px solid #454545;background-color:#454545}
.con-FangDa-ImgList > li:first-child{margin-left:0}
.con-FangDa-ImgList > li > img{width:100%;height:100%}
.con-FangDa-ImgList > .active{border-color:red}
 

$(function(){
	$.fn.magnifying = function(){
		var that = $(this),
		 $imgCon = that.find('.con-fangDaIMg'),//正常圖片容器
		 	$Img = $imgCon.find('img'),//正常圖片，還有放大圖片集合
		   $Drag = that.find('.magnifyingBegin'),//拖動滑動容器
		   $show = that.find('.magnifyingShow'),//放大鏡顯示區域
		$showIMg = $show.find('img'),//放大鏡圖片
		$ImgList = that.find('.con-FangDa-ImgList > li >img'),
		multiple = $show.width()/$Drag.width();//倍數

		$imgCon.mousemove(function(e){
			$Drag.css('display','block');
			$show.css('display','block');
		    //獲取座標的兩種方法
		   	// var iX = e.clientX - this.offsetLeft - $Drag.width()/2,
		   	// 	iY = e.clientY - this.offsetTop - $Drag.height()/2,	
		   	var iX = e.pageX - $(this).offset().left - $Drag.width()/2,
		   		iY = e.pageY - $(this).offset().top - $Drag.height()/2,	
		   		MaxX = $imgCon.width()-$Drag.width(),
		   		MaxY = $imgCon.height()-$Drag.height();
  	   	    /*這一部分可代替下面部分，判斷最大最小值
		   	var DX = iX < MaxX ? iX > 0 ? iX : 0 : MaxX,
		   		DY = iY < MaxY ? iY > 0 ? iY : 0 : MaxY;
		   	$Drag.css({left:DX+'px',top:DY+'px'});	   		
		   	$showIMg.css({marginLeft:-3*DX+'px',marginTop:-3*DY+'px'});*/

		   	iX = iX > 0 ? iX : 0;
		   	iX = iX < MaxX ? iX : MaxX;
		   	iY = iY > 0 ? iY : 0;
		   	iY = iY < MaxY ? iY : MaxY;	
		   	$Drag.css({left:iX+'px',top:iY+'px'});	   		
		   	$showIMg.css({marginLeft:-multiple*iX+'px',marginTop:-multiple*iY+'px'});
		   	//return false;
		});
		$imgCon.mouseout(function(){
		   	$Drag.css('display','none');
			$show.css('display','none');
			//return false;
		});

		$ImgList.click(function(){
			var NowSrc = $(this).attr('src');
			$Img.attr('src',NowSrc);
			$(this).parent().addClass('active').siblings().removeClass('active');
		});	
	}
	$("#fangdajing").magnifying();
});