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

最新推荐文章于 2020-11-06 10:09:18 发布

aojiu4000

最新推荐文章于 2020-11-06 10:09:18 发布

阅读量1k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LO-ME/p/4608503.html

版权

函数

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>

转载于:https://www.cnblogs.com/LO-ME/p/4608503.html

aojiu4000

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数学揭密之函数与勾股定理

函数function show(n){ return n*2;}alert( show(2) ); //4alert( show(3) ); //6alert( show(4) ); //8勾股定理可以实现两点坐标求距离的应用JS中的平方和开方　　Math.pow(2,3) //2的立方 ...
复制链接

扫一扫