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
- 下一篇： 蓝桥杯 历届试题 对局匹配