（不好意，先前發(fā)布的是有誤的分析?，F(xiàn)在的這個(gè)沒(méi)問(wèn)提了?。。。?/p>

昨天看到了“妙味課堂”的一個(gè)蘋果菜單的DEMO。根據(jù)里面提到的“勾股定理”。我自己分析了一下代碼。如下：

先來(lái)一效果圖吧！

靜止時(shí)：

鼠標(biāo)滑動(dòng)時(shí)：

一、要實(shí)現(xiàn)在的功能或效果：

　在鼠標(biāo)滑動(dòng)的靠近其中某一張圖片時(shí)，這個(gè)圖片會(huì)隨著鼠標(biāo)向它的靠近而慢慢放大。

　a.是“放大”不是“變大”?！痉糯蟆渴堑缺壤模咀兇蟆浚翰灰欢ㄊ堑缺壤?。后面的公式中會(huì)體現(xiàn)。

　b.這里的【靠近】：是指靠近圖片的【中心點(diǎn)】。離圖片【中心點(diǎn)】越近，圖片越大，遠(yuǎn)離中心點(diǎn)，就變小，當(dāng)然這里的【變小】是指相對(duì)于放大之后的變小，不會(huì)變小到比原始值還要小。

　鼠標(biāo)靠近紅點(diǎn)即圖片的【中心點(diǎn)】，圖片變大，遠(yuǎn)離，變小

　靠近紅點(diǎn)　

   遠(yuǎn)離紅點(diǎn)

 二、功能分析：

1.【放大】效果：

　原來(lái)的圖片寬度乘以一個(gè)比例數(shù),假設(shè)這個(gè)圖片原大小是寬64PX 高64PX;那么我把這個(gè)寬64乘以一個(gè)比例數(shù)（這里先設(shè)為X），那么 64*X  就是它放大值；

　用這個(gè)放大值加上原先的寬度，就是【放大】效果的后值。

　即：放大后圖片的寬度值 = 64*X + 64；

?。ㄟ@里不考慮高度，因?yàn)樵贗MG標(biāo)簽中，不定義高度，只定義寬度的話，那么寬度值變化了，高度值也會(huì)一起變化。所以只需要改變寬度值，就行了。）

2.  如何判斷鼠標(biāo)距離圖片【中心點(diǎn)】的遠(yuǎn)近？

　 鼠標(biāo)在web頁(yè)面中間是一個(gè)點(diǎn)，而圖片【中心點(diǎn)】也是一個(gè)點(diǎn)，通過(guò)這兩點(diǎn)之間連線的長(zhǎng)度值的大小，就可以判斷鼠標(biāo)距離圖片【中心點(diǎn)】的遠(yuǎn)近了；

　 即：這個(gè)長(zhǎng)度值越大：說(shuō)明鼠標(biāo)距離圖片【中心點(diǎn)】越遠(yuǎn)；

　 這個(gè)長(zhǎng)度值越?。赫f(shuō)明鼠標(biāo)距離圖片【中心點(diǎn)】越近；

　 距離值大（白色：圖片，紅色：中心點(diǎn)，黃色：鼠標(biāo)，藍(lán)色：鼠標(biāo)與中心點(diǎn)的距離，黑色:DIV）

      距離值?。ò咨簣D片，紅色：中心點(diǎn)，黃色：鼠標(biāo)，藍(lán)色：鼠標(biāo)與中心點(diǎn)的距離，黑色:DIV）

3.  如何獲得鼠標(biāo)距離圖片【中心點(diǎn)】的值？（即上圖中藍(lán)色線條的長(zhǎng)度（這是重點(diǎn)））

　3.1 其實(shí)質(zhì)就是要獲得任意兩點(diǎn)之間的距離值。

　3.2 獲得方法：先構(gòu)建一個(gè)直角三角形。再通過(guò)【勾肌定理】計(jì)算出兩點(diǎn)之間的距離值；（因?yàn)槲覀兛梢酝ㄟ^(guò)JS的方法獲得水平橫向和縱向的值。正好要求斜線的值。于是可以求助【勾肌定理】了）

　3.3【勾肌定理】：直角三角形的兩直角邊的平方和等于斜邊的平方這一特性（X2+Y2=Z2）；

　　　x:一個(gè)直角邊長(zhǎng)度；

　　　y:另一個(gè)直角邊長(zhǎng)度；

　　　z:斜邊長(zhǎng)度（即兩點(diǎn)之間的距離值）；

　　　所以要獲得Z的長(zhǎng)度值，必需知道X和Y是多少；

　3.4 構(gòu)建一個(gè)直角三角形

　3.5求出鼠標(biāo)距離圖片【中心點(diǎn)】的值，即上圖中的藍(lán)色線的長(zhǎng)度，即 Z 的值

　　3.5.1 先獲得X的值：（obj:白的圖片, oDiv:橙色的DIV, oEvent:鼠標(biāo), 黑色：web頁(yè)面）

　　　　(灰色+藍(lán)紫色+綠色)的長(zhǎng)度值 = obj.offsetLeft + oDiv.offsetLeft + obj.offsetWidth/2;

　　　　(紅色的長(zhǎng)度值)= oEvent.clientX;

　　　　X的長(zhǎng)度值 = （ oimg.offsetLeft+oDiv.offsetLeft+obj.offsetWidth/2 ）- （oEvent.clientX）；　

　　3.5.2 再獲得Y的值：（obj:白的圖片, oDiv:橙色的DIV, oEvent:鼠標(biāo), 黑色：web頁(yè)面）

　　　　(灰色+藍(lán)紫色+綠色)的長(zhǎng)度值 = obj.offsetTop + oDiv.offsetTop + obj.offsetHeight/2;

　　　　(紅色的長(zhǎng)度值)= oEvent.clientY;

　　　　Y的長(zhǎng)度值 = （ oimg.offsetTop+oDiv.offsetTop+obj.offsetHeight/2 ）- （oEvent.clientY）；

　　3.5.3【勾肌定理】：直角三角形的兩直角邊的平方和等于斜邊的平方這一特性（X2+Y2=Z2）；\

　　　　　（Math.pow(……，2)可以球出平方； Math.sqrt（……）可以求出平方根；）

　　　　　　　x2 = Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) ;

　　　　　　　Y2=  Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2);

　　　　　　　z2 =　　Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) +

　　　　　　　　　　  Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)

　　　　　　　　z =  Math.sqrt(

　　　　　　　　　　Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) +

　　　　　　　　　　 Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)
　　　　　　　　　　)

　　　　　終于獲得到 Z 的值了(即鼠標(biāo)距離圖片【中心點(diǎn)】的值，上圖中藍(lán)色線條的長(zhǎng)度)?。?！

4.  圖片放大的范圍

　4.1上面的Z的范圍應(yīng)該是

　　　最小0（鼠標(biāo)和【中心點(diǎn)】重合，黃色和紅色重合，之間沒(méi)有連線。所以是0）；

　　　最大不確定；這里我們規(guī)定一個(gè)200；

　　　所以z的范圍 0 - 200；

　　　Math.min():返回兩個(gè)數(shù)中較小的；

　　　z = Math.min(Z,200)；

5. 圖片放大縮小公式：

　　當(dāng)z越接近0，　       即鼠標(biāo)越靠近圖片【中心點(diǎn)】，圖片應(yīng)該放大；

　　當(dāng)z越接近200，　　即鼠標(biāo)越遠(yuǎn)離圖片【中心點(diǎn)】，圖片應(yīng)該縮小；

　　結(jié)合第一點(diǎn)的公式：圖片的寬度值 = X *64+ 64；　

　　得出公式：X = (iMax-Z)/iMax

　　aImg[i].width=((iMax-Z)/iMax)*64+64;

6.  完整代碼

document.onmousemove=function (ev)
{
 var oEvent=ev||event;
 var oDiv=document.getElementById('div1');
 var aImg=oDiv.getElementsByTagName('img');
 var d=0;
 var iMax=200;
 var i=0;
 function getDistance(obj)
 {
  return Math.sqrt
  (
   Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2)+
   Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)
  ); 
 }
 for(i=0;i<aImg.length;i++)
 {
  d=getDistance(aImg[i]);
  d=Math.min(d,iMax);  
  aImg[i].width=((iMax-d)/iMax)*64+64;
 }
};

<divid="div1">
 <a width="64" longdesc="妙味課堂" alt="妙味課堂" title="妙味課堂" /></a>
 <a width="64" longdesc="妙味課堂" alt="妙味課堂" title="妙味課堂" /></a>
 <a width="64" longdesc="妙味課堂" alt="妙味課堂" title="妙味課堂" /></a>
 <a width="64" longdesc="妙味課堂" alt="妙味課堂" title="妙味課堂" /></a>
 <a width="64" longdesc="妙味課堂" alt="妙味課堂" title="妙味課堂" /></a>
</div>
body {margin:0px;}
#div1 {text-align:center;bottom:0px; position:relative; width:500px; margin:0 auto; border:1px solid red;}
#div1 img {border:none;}

三、總結(jié)

　1.要獲得任意兩點(diǎn)之間的距離值，通過(guò)【勾肌定理】直角三角形的兩直角邊的平方和等于斜邊的平方這一特性（X2+Y2=Z2）；

　2. (iMax-Z)/iMax ，和比例有關(guān)的算法，結(jié)合加法或減法、除法、乘法；

　　減法：一個(gè)數(shù)不變，另一個(gè)數(shù)變大，結(jié)果越小；反之越大；

　　加法：一個(gè)數(shù)不變，另一個(gè)數(shù)變大，結(jié)果越大；反之越小；

　3. 有圖片變化的效果，或都說(shuō)是形狀變化效果的時(shí)候，是不是應(yīng)該先抽象成基本的形狀，如點(diǎn)、線，面：三角形，正方形矩形，圓，平形四邊形。然后找規(guī)律，多觀察那些變化，那些沒(méi)有變，熟悉或查找相關(guān)實(shí)例所涉及到的定理公式。慢慢的推導(dǎo)出效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，謝謝對(duì)腳本之家的支持！

最新評(píng)論