JavaScript数学揭密之函数与勾股定理

函数

function show(n){
return n*2;
}
alert( show(2) ); //
alert( show(3) ); //
alert( show(4) ); //

勾股定理

可以实现两点坐标求距离的应用

JS中的平方和开方

  Math.pow(2,3)   //2的立方

    Math.pow(3,2)   //3的平方

    Math.sqrt( 9 )   //

    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>
上一篇:Python 标准类库 - 因特网协议与支持之socketserver


下一篇:如何只用CSS做到完全居中