原生JS通过勾股定理计算苹果菜单效果
程序员文章站
2022-06-24 11:06:44
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用 难点: 计算 html结构: js window.onload = function( ......
js原生苹果菜单效果
知识点:
勾股定理 a²+b²=c²
event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用
难点:
计算
#box { width: 100%; position: absolute; text-align: center; bottom: 0; } #box img { width: 60px; }
html结构:
<input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <div id="box"> <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=""> </div>
window.onload = function() { var input = document.getelementsbytagname('input'); var obox = document.getelementbyid('box'); var oimg = obox.children; // console.log(oimg); document.onmousemove = function(even) { var even = even || window.event; var x; var y; for (var i = 0; i < oimg.length; i++) { //获取图片的中心点 x = oimg[i].offsetleft + oimg[i].offsetwidth / 2; y = oimg[i].offsettop + obox.offsettop + oimg[i].offsetheight / 2; //鼠标在浏览器坐标的x轴距图片x中心点距离 var a = even.clientx - x; //鼠标在浏览器坐标的y轴距图片y中心点距离 var b = even.clienty - y; //勾股定理a²+b²=c² var c = math.sqrt(math.pow(b, 2) + math.pow(a, 2)) //scale 表示放大比例 var scale = 1 - c / 300; if (scale < 0.5) { scale = 0.5; } //每张图片的c赋值到input中,方便查看数据变化 input[i].value = scale; oimg[i].style.width = scale * 100 + "px"; oimg[i].style.height = scale * 100 + "px"; } }; };
上一篇: c++ 数组定义及初始化详解