一、函数
function show(n){
return n*2;
}
alert( show(2) ); //4
alert( show(3) ); //6
alert( show(4) ); //8
二、勾股定理
1、可以实现两点坐标求距离的应用
2、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>
时间： 2025-01-05 22:18:09