Mac Dock 效果及原理（勾股定理）
生活随笔
收集整理的這篇文章主要介紹了
Mac Dock 效果及原理（勾股定理）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個是蘋果機上的 Dock 效果，Windows 上也有一款專門的模擬軟件——RocketDock。
代碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>RocketDock效果</title> <style> /* CSS Reset */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;} body,button,input,select,textarea {font:12px/1.5 \5FAE\8F6F\96C5\9ED1,\5B8B\4F53,Arial,Helvetica,sans-serif;} h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;} table {border-collapse:collapse; border-spacing:0;} em {font-style:normal;} ul,ol {list-style:none;} a {text-decoration:none; color:#39442e;} a:hover {text-decoration:underline;} fieldset,img {border:0;} button,input,select,textarea {font-size:100%; border:0;} .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clearfix {*zoom:1;}.menu {position:absolute; width:100%; bottom:0; text-align:center;} </style> </head> <body> <div id="menu" class="menu"><img src="images/1.png" alt="" /><img src="images/2.png" alt="" /><img src="images/3.png" alt="" /><img src="images/4.png" alt="" /><img src="images/5.png" alt="" /><img src="images/6.png" alt="" /><img src="images/7.png" alt="" /><img src="images/8.png" alt="" /> </div> <script> window.onload=function () {var oMenu=document.getElementById("menu");var aImg=oMenu.getElementsByTagName("img");var aWidth=[];var i=0;for (i=0;i<aImg.length;i++) {//存儲最初寬度 aWidth.push(aImg[i].offsetWidth);//設置新的寬度 aImg[i].width=parseInt(aImg[i].offsetWidth/2); }//鼠標移入事件 document.onmousemove=function (event) {var event=event || window.event;for (i=0;i<aImg.length;i++) {/** 勾股定理的應用，a/b為直角的兩邊* 計算鼠標到各種圖片中心的直線距離*/var a=event.clientX-aImg[i].offsetLeft-aImg[i].offsetWidth/2;var b=event.clientY-aImg[i].offsetTop-oMenu.offsetTop-aImg[i].offsetHeight/2;/** 設置圖片放大比例，先將取得的值除以一個數值（Math.sqrt(a*a+b*b)/300）* 然后再用1減去這個初始比例（距離越近，比例應越大）*/var iScale=1-Math.sqrt(a*a+b*b)/300;/** 如果鼠標距離圖片太遠，比例設置為0.5（該比例請與最初圖片的設置保持一致）* */if (iScale<0.5) {iScale=0.5;};aImg[i].width=aWidth[i]*iScale;};}; }; </script> </body> </html>實現原理：
拆分成單個圖片的放大效果來看，具體的方法是計算鼠標指標到圖片中心的距離，然后除以一個定值（隨意），接著用 1 減去這個值（因為距離越近，比例越大），如果是鼠標指標距離圖片太遠會造成圖片反而變小，因此作個判斷，當這個比例小于某個值時，則設置為圖片縮小的初始值。
1.Math.sqrt(x)：返回一個數的平方根。x 必需且是大于等于 0 的數。
案例下載>>Dock效果?
轉載于:https://www.cnblogs.com/milly/p/dock-effect.html
總結
以上是生活随笔為你收集整理的Mac Dock 效果及原理（勾股定理）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么看服务器cpu温度命令_服务器cpu
- 下一篇： 蓝桥杯 历届试题 对局匹配