Html_JQuery之放大鏡

最近學了JQuery的一些簡單知識，跟着教學作了個放大鏡功能的網頁。內容是將鼠標放在一張圖片上，對應位置放大後顯示出來。

原理是用兩張成比例的圖片，小圖片上對應的某塊區域，顯示出來的放大區域其實是大圖片上的位置（小圖片上對應的某塊區域的位置大小乘以兩張圖片的倍數）？？

or（當小圖片上對應區域移動時，顯示放大的區域的背景圖片的位置反向移動）

下面是代碼：

首先定義網頁的佈局：#fangdajing下有#left 和 #right 

#left下有img 、#float 、#mask

#left ：放小圖片、要放大的區域float 、一個圖片區域mask

#right：放大的區域

<div id="fangdajing">
			<div id="left">
				<img src="imgs/small.jpg" >
				<div id="float"></div>
				<div id="mask"></div>
			</div>
			<div id="right"></div>
		</div>

設置元素的style：

#fangdajing #left{//設置大小爲小圖片的大小
	width: 300px;
	height: 168px;
	float:left;
	position: relative;//位置爲絕對，以便等下要放大的區域只在#left裏面
}

#fangdajing #left #img{
	width: 300px;
	height: 168px;
}

#fangdajing #left #mask{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: black;
	opacity: 0;
}

#fangdajing #left #float{
	width: 50px;
	height: 50px;
	background-color: #FFFF00;
	opacity: 0.5;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}

#fangdajing #right{//大小爲#float * 兩張圖片大小的倍數
	width: 200px;
	height: 200px;
	background-image: url(imgs/big.jpg);
	float:left;
	margin-left: 80px;
	display: none;
}

設置完樣式後，接下來就是實現放大效果：

咱們在當即執行函數(function($){}(jQuery)裏面實現,形參傳$，實參傳jQuery 這樣解決接下來寫Jquery插件命名衝突的問題。在當即執行函數裏面編寫插件fangdajing()方法

(function($){
	$.fn.extend({
			fangdajing:function(){
				this.each(function(){//遍歷全部調用fangdajing()的jQuery對象
					var that = this;//記錄當前調用fangdajing()的jQuery對象
                    //把$('#left')限定在當前調用fangdajing()的jQuery對象（選取當前jQuery對象下的#left標籤）
					$('#left',this).mousemove(function(evt){//調用鼠標移動方法
						var float = $('#float',this);//把float 限定在$('#left')
						var x = evt.offsetX;//取鼠標在left裏面的x座標
						var y = evt.offsetY;//取鼠標在left裏面的y座標
						x = x - float.width()/2;//進行此計算是爲了下面把float的中心x座標設置爲鼠標的x座標
						y = y - float.height()/2;//與上同理
						
						//限定float在left裏面
						if(x<0){
							x=0;
						}
						if(y<0){
							y=0;
						}
						
						//此時的$(this)就是 $('#left',this)
						if(x > $(this).width() - float.width()){
							x = $(this).width() - float.width();
						}
						if(y > $(this).height() - float.height()){
							y = $(this).height() - float.height();
						}
						//設置鼠標指針在float的中心
						float.css({
							left:x,
							top:y
						})
						//設置right
						$('#right',that).css({
                 //float與right的大小倍數爲4，而後 * -1  將right的背景圖位置與float在left中的位置相對應
                 //也就是當left向右移動n px，right的背景圖就向左移動n*4 px 
							backgroundPosition: x * -4 +'px ' + y * -4 + 'px' 
						})
					}).mouseover(function(){//鼠標移到小圖片上時， 顯示小方塊和 放大的區域
						$('#left #float,#right',that).show();
					}).mouseout(function(){//鼠標移出小圖片時， 隱藏小方塊和 放大的區域
						$('#left #float,#right',that).hide();
					});
				})
			}
		})
})(jQuery)

表述得很爛，但大概就是如此啦，若有錯誤，請大佬指正。