詳解基于javascript實現(xiàn)的蘋果系統(tǒng)底部菜單
（不好意，先前發(fā)布的是有誤的分析?，F(xiàn)在的這個沒問提了?。。。?/p>
昨天看到了“妙味課堂”的一個蘋果菜單的DEMO。根據(jù)里面提到的“勾股定理”。我自己分析了一下代碼。如下：
先來一效果圖吧！
靜止時：
鼠標(biāo)滑動時：
一、要實現(xiàn)在的功能或效果：
在鼠標(biāo)滑動的靠近其中某一張圖片時，這個圖片會隨著鼠標(biāo)向它的靠近而慢慢放大。
a.是“放大”不是“變大”?！痉糯蟆渴堑缺壤模咀兇蟆浚翰灰欢ㄊ堑缺壤?。后面的公式中會體現(xiàn)。
b.這里的【靠近】：是指靠近圖片的【中心點(diǎn)】。離圖片【中心點(diǎn)】越近，圖片越大，遠(yuǎn)離中心點(diǎn)，就變小，當(dāng)然這里的【變小】是指相對于放大之后的變小，不會變小到比原始值還要小。
鼠標(biāo)靠近紅點(diǎn)即圖片的【中心點(diǎn)】，圖片變大，遠(yuǎn)離，變小
靠近紅點(diǎn)
遠(yuǎn)離紅點(diǎn)
二、功能分析：
1.【放大】效果：
原來的圖片寬度乘以一個比例數(shù),假設(shè)這個圖片原大小是寬64PX 高64PX;那么我把這個寬64乘以一個比例數(shù)（這里先設(shè)為X），那么 64*X 就是它放大值；
用這個放大值加上原先的寬度，就是【放大】效果的后值。
即：放大后圖片的寬度值 = 64*X + 64；
?。ㄟ@里不考慮高度，因為在IMG標(biāo)簽中，不定義高度，只定義寬度的話，那么寬度值變化了，高度值也會一起變化。所以只需要改變寬度值，就行了。）
2. 如何判斷鼠標(biāo)距離圖片【中心點(diǎn)】的遠(yuǎn)近？
鼠標(biāo)在web頁面中間是一個點(diǎn)，而圖片【中心點(diǎn)】也是一個點(diǎn)，通過這兩點(diǎn)之間連線的長度值的大小，就可以判斷鼠標(biāo)距離圖片【中心點(diǎn)】的遠(yuǎn)近了；
即：這個長度值越大：說明鼠標(biāo)距離圖片【中心點(diǎn)】越遠(yuǎn)；
這個長度值越小：說明鼠標(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)色線條的長度（這是重點(diǎn)））
3.1 其實質(zhì)就是要獲得任意兩點(diǎn)之間的距離值。
3.2 獲得方法：先構(gòu)建一個直角三角形。再通過【勾肌定理】計算出兩點(diǎn)之間的距離值；（因為我們可以通過JS的方法獲得水平橫向和縱向的值。正好要求斜線的值。于是可以求助【勾肌定理】了）
3.3【勾肌定理】：直角三角形的兩直角邊的平方和等于斜邊的平方這一特性（X2+Y2=Z2）；
x:一個直角邊長度；
y:另一個直角邊長度；
z:斜邊長度（即兩點(diǎn)之間的距離值）；
所以要獲得Z的長度值，必需知道X和Y是多少；
3.4 構(gòu)建一個直角三角形
3.5求出鼠標(biāo)距離圖片【中心點(diǎn)】的值，即上圖中的藍(lán)色線的長度，即 Z 的值
3.5.1 先獲得X的值：（obj:白的圖片, oDiv:橙色的DIV, oEvent:鼠標(biāo), 黑色：web頁面）
(灰色+藍(lán)紫色+綠色)的長度值 = obj.offsetLeft + oDiv.offsetLeft + obj.offsetWidth/2;
(紅色的長度值)= oEvent.clientX;
X的長度值 = （ oimg.offsetLeft+oDiv.offsetLeft+obj.offsetWidth/2 ）- （oEvent.clientX）；
3.5.2 再獲得Y的值：（obj:白的圖片, oDiv:橙色的DIV, oEvent:鼠標(biāo), 黑色：web頁面）
(灰色+藍(lán)紫色+綠色)的長度值 = obj.offsetTop + oDiv.offsetTop + obj.offsetHeight/2;
(紅色的長度值)= oEvent.clientY;
Y的長度值 = （ oimg.offsetTop+oDiv.offsetTop+obj.offsetHeight/2 ）- （oEvent.clientY）；
3.5.3【勾肌定理】：直角三角形的兩直角邊的平方和等于斜邊的平方這一特性（X2+Y2=Z2）；\
?。∕ath.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)色線條的長度)?。。?/p>
4. 圖片放大的范圍
4.1上面的Z的范圍應(yīng)該是
最小0（鼠標(biāo)和【中心點(diǎn)】重合，黃色和紅色重合，之間沒有連線。所以是0）；
最大不確定；這里我們規(guī)定一個200；
所以z的范圍 0 - 200；
Math.min():返回兩個數(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)該縮?。?/p>
結(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)之間的距離值，通過【勾肌定理】直角三角形的兩直角邊的平方和等于斜邊的平方這一特性（X2+Y2=Z2）；
2. (iMax-Z)/iMax ，和比例有關(guān)的算法，結(jié)合加法或減法、除法、乘法；
減法：一個數(shù)不變，另一個數(shù)變大，結(jié)果越?。环粗酱?；
加法：一個數(shù)不變，另一個數(shù)變大，結(jié)果越大；反之越?。?/strong>
3. 有圖片變化的效果，或都說是形狀變化效果的時候，是不是應(yīng)該先抽象成基本的形狀，如點(diǎn)、線，面：三角形，正方形矩形，圓，平形四邊形。然后找規(guī)律，多觀察那些變化，那些沒有變，熟悉或查找相關(guān)實例所涉及到的定理公式。慢慢的推導(dǎo)出效果。
以上就是本文的全部內(nèi)容，希望對大家有所幫助，謝謝對腳本之家的支持！
- 判斷滾動條到底部的JS代碼
- 公共js在頁面底部加載的注意事項介紹
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
- 始終在頁面底部的層js實現(xiàn)代碼
- Javascript實現(xiàn)DIV滾動自動滾動到底部的代碼
- js實現(xiàn)滾動條滾動到頁面底部繼續(xù)加載
- 基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)
- JS實現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
- js實現(xiàn)帶關(guān)閉按鈕始終顯示在網(wǎng)頁最底部工具條的方法
- JS實現(xiàn)判斷滾動條滾到頁面底部并執(zhí)行事件的方法
- js判斷滾動條是否已到頁面最底部或頂部實例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
js動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼
最近做項目遇到這樣的需求，要求表格添加一行，表格刪除一行，表格遍歷取值等。下面小編給大家?guī)砹薺s動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼，需要的朋友參考下2018-01-01
微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片放大預(yù)覽
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)點(diǎn)擊圖片放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了Javascrip實現(xiàn)文字跳動特效的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
本文給大家淺析javascript調(diào)試方法和技巧，涉及到j(luò)avascript調(diào)試方法和技巧方面的知識，本文介紹的非常詳細(xì)，非常具有參考借鑒介紹，感興趣的朋友一起看看吧2015-10-10
layui數(shù)據(jù)表格 table.render 報錯的解決方法
今天小編就為大家分享一篇layui數(shù)據(jù)表格 table.render 報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家介紹了js常用的方法示例梳理總結(jié)及功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
uniapp使用uni.chooseLocation()打開地圖選擇位置詳解
這篇文章主要給大家介紹了關(guān)于uniapp使用uni.chooseLocation()打開地圖選擇位置的相關(guān)資料,因為最近在項目中遇到一個要用戶授權(quán)位置且可以用戶自己選擇位置的功能,需要的朋友可以參考下2023-06-06
本文給大家分享小編日常收集整理的關(guān)于前端面試題之url、href、src的語法規(guī)則及基本概念，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
本篇文章主要介紹了JS實現(xiàn)瀏覽器打印、打印預(yù)覽示例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02