函数
function show(n){ return n*2; } alert( show(2) ); //4 alert( show(3) ); //6 alert( show(4) ); //8
勾股定理
可以实现两点坐标求距离的应用
JS中的平方和开方
Math.pow(2,3) //2的立方 Math.pow(3,2) //3的平方 Math.sqrt( 9 ) //3 alert( Math.sqrt( Math.pow(3,2) + Math.pow(4,2) ) ); //这就是勾股定理
使用勾股定理计算两点之间的距离，从而实现类似苹果菜单的案例
原理是检测鼠标的位置，然后计算鼠标跟图片的距离，距离最近的图片最大，距离最远的图片最小
<style> *{ margin:0; padding:0;} #div1{ width:100%; position:absolute; bottom:0; text-align:center;} img{ width:64px;} </style> <script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); var oDiv = document.getElementById('div1'); var aImg = oDiv.getElementsByTagName('img'); document.onmousemove = function(ev){ var ev = ev || window.event; for(var i=0;i<aImg.length;i++){ //图片距离页面左边边界的距离+每张图片的宽度的一半 这里不用加上div距离页面左边边界的距离，因为宽度是百分百的，距离就为零 var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2; //图片距离页面上边边界的距离+每张图片的宽度的一半+加上div距离页面上边边界的距离 var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop; var b = ev.clientX - x;//鼠标坐标的位置减去图片中心点坐标的位置 水平边的 var a = ev.clientY - y;//鼠标坐标的位置减去图片中心点坐标的位置 垂直边的 var c = Math.sqrt(Math.pow(b,2) + Math.pow(a,2));//知道两条直角边 获取第三条边的长度，也就是勾股定理 //使鼠标距离图片越近这个值就越大 var scale = 1 - c/300; if(scale<0.5){ scale = 0.5; } aInput[i].value = scale; aImg[i].style.width = scale * 128 + 'px'; aImg[i].style.height = scale * 128 + 'px'; } }; }; </script> </head> <body> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <div id="div1"> <img src="img/1.png"> <img src="img/2.png"> <img src="img/3.png"> <img src="img/4.png"> <img src="img/5.png"> </div> </body>